0

I have a table in which one particular column consists of images. On click of any of those images, a popup is opened in which the complete image can be viewed. I am using a canvas to paint the image within the popup as its saving me 30s in IE while opening the popup(for a very large image)

However, there is one particular image which is really big (Width 8386, Height-2229) and I sometimes get the error in IE "Not enough storage is available to complete this operation." against the line ctx.drawImage().It works sometimes but fails the rest of the times. Below is a code snippet.

_paintImage: function(base64Value){
    var canvas = $(".image-measure-canvas")[0];
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.onload = function(){
        var width = this.width;
        var height = this.height;
        canvas.width = width;
        canvas.height = height;
        ctx.beginPath();
        ctx.drawImage(this, 0, 0,width, height);
    };
    img.src = imageValue;
}
Behram Buhariwala
  • 103
  • 1
  • 8
  • 1
    *"I am using a canvas to paint the image within the popup as its saving me 30s in IE while opening the popup(for a very large image)"* Um...that sounds like a problem with the previous code, not a reason for using canvas for this. – T.J. Crowder May 21 '18 at 11:40
  • 1
    Are you really targeting users with a 8000x2000px screen? Otherwise, produce downsized versions to be displayed, and if you really want to make the full size version available, then offer a download link, but don't even try to display it in a browser, it's 56MB raw pixel data (if RGB, 74MB if there is alpha). You faced the issue on IE, but a lot of low end devices will also feel bad displaying this. – Kaiido May 21 '18 at 12:09
  • Maybe is the IE limit of: 8,192 pixels - see here: [Maximum size of a element](https://stackoverflow.com/a/11585939/4845566) – deblocker May 21 '18 at 18:06

0 Answers0