EDGE can’t copy large images using JS from/to a canvas?

Asked

Viewed 52 times

2

I have the following code, which copies pieces of the image "smoothchartshowAnalisysCopy" (500px X 250px) to the larger image (32172px X 250px).

var c   = document.getElementById('analysisFullGraph1'); 32172px X 250px
var ctx = c.getContext('2d');

var imageNow = document.querySelector('#smoothchartshowAnalisysCopy');
var ctxImageNow = imageNow.getContext('2d');


function copy(){
    var elmnt  = document.querySelector('#analysisFullGraphContainer1');
    var x = elmnt.scrollLeft;
    var y = elmnt.scrollTop;
    var imgData = ctx.getImageData(x, 0, 828, 270);
    ctxImageNow.putImageData(imgData, 0, 0);

}

It’s working perfectly with IE, Firefox, Chrome, Safari and Vivaldi, except with MS Edge. The MS Edge only copies the pieces of the image from the beginning to the position of 14000px.

In larger positions of 14000px, not even an error appears, but nothing is copied.

I couldn’t find anything in the Microsoft documentation, or anything relevant on Google.

  • 1

    Are you sure you checked the console log? Maybe it’s a browser limit. I wouldn’t recommend doing a wide canvas like this, it can make it fit on the page easily. What is your intention to create a giant canvas? This can cause a significant loss of page performance.

  • 1

    The ImageData of the canvas reserves 4 information for each pixel. Think about it! : 32172x250 = 8043000x4 = 32172000, your ImageData().data on canvas would contain 32172000 elements that hold pixel information. You might as well make a mechanism.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.