Browse Source

IE11 svg image fixes (#3477)

* IE11 svg image fixes

* Fixed broken images still trying to draw

* Fixed lint error
jittering-top
justinharrell 7 years ago
committed by Yotam Berkowitz
parent
commit
3125aae6c9
1 changed files with 26 additions and 41 deletions
  1. +26
    -41
      lib/network/CachedImage.js

+ 26
- 41
lib/network/CachedImage.js View File

@ -12,9 +12,9 @@
*/ */
class CachedImage { class CachedImage {
/** /**
* @param {Image} image
*/
constructor(image) { // eslint-disable-line no-unused-vars
* @ignore
*/
constructor() { // eslint-disable-line no-unused-vars
this.NUM_ITERATIONS = 4; // Number of items in the coordinates array this.NUM_ITERATIONS = 4; // Number of items in the coordinates array
this.image = new Image(); this.image = new Image();
@ -36,17 +36,28 @@ class CachedImage {
this.width = w; this.width = w;
this.height = h; this.height = h;
var h2 = Math.floor(h/2);
var h4 = Math.floor(h/4);
var h8 = Math.floor(h/8);
var h16 = Math.floor(h/16);
var w2 = Math.floor(w/2);
var w4 = Math.floor(w/4);
var w8 = Math.floor(w/8);
var w16 = Math.floor(w/16);
// Make canvas as small as possible // Make canvas as small as possible
this.canvas.width = 3*w/4;
this.canvas.height = h/2;
this.canvas.width = 3*w4;
this.canvas.height = h2;
// Coordinates and sizes of images contained in the canvas // Coordinates and sizes of images contained in the canvas
// Values per row: [top x, left y, width, height] // Values per row: [top x, left y, width, height]
this.coordinates = [ this.coordinates = [
[ 0 , 0 , w/2 , h/2],
[ w/2 , 0 , w/4 , h/4],
[ w/2 , h/4, w/8 , h/8],
[ 5*w/8, h/4, w/16, h/16]
[ 0 , 0 , w2 , h2],
[ w2 , 0 , w4 , h4],
[ w2 , h4, w8 , h8],
[ 5*w8, h4, w16, h16]
]; ];
this._fillMipMap(); this._fillMipMap();
@ -114,7 +125,11 @@ class CachedImage {
* @param {number} height * @param {number} height
*/ */
drawImageAtPosition(ctx, factor, left, top, width, height) { drawImageAtPosition(ctx, factor, left, top, width, height) {
if (factor > 2 && this.initialized()) {
if(!this.initialized())
return; //can't draw image yet not intialized
if (factor > 2) {
// Determine which zoomed image to use // Determine which zoomed image to use
factor *= 0.5; factor *= 0.5;
let iterations = 0; let iterations = 0;
@ -133,42 +148,12 @@ class CachedImage {
from[0], from[1], from[2], from[3], from[0], from[1], from[2], from[3],
left, top, width, height left, top, width, height
); );
} else if (this._isImageOk()) {
} else {
// Draw image directly // Draw image directly
ctx.drawImage(this.image, left, top, width, height); ctx.drawImage(this.image, left, top, width, height);
} }
} }
/**
* Check if image is loaded
*
* Source: http://stackoverflow.com/a/1977898/1223531
*
* @returns {boolean}
* @private
*/
_isImageOk() {
var img = this.image;
// During the onload event, IE correctly identifies any images that
// weren’t downloaded as not complete. Others should too. Gecko-based
// browsers act like NS4 in that they report this incorrectly.
if (!img.complete) {
return false;
}
// However, they do have two very useful properties: naturalWidth and
// naturalHeight. These give the true size of the image. If it failed
// to load, either of these should be zero.
if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
return false;
}
// No other way of checking: assume it’s ok.
return true;
}
} }

Loading…
Cancel
Save