2

I'm working on a canvas upload script to upload huge images for a client. I have everything working as needed, except one problem. HUGE images don't work. The goal is to be able to upload images of around 20000x20000.

Images of around 15000x15000 are working fine, but larger don't. It even isn't consistent in what the results are. Mostly they just turn black, but sometimes the browser just stops and gives the page that it stopped working.

var oc = document.createElement('canvas'), octx = oc.getContext('2d');
oc.width = img.width;
oc.height = img.height;

var iStep = .9;

while (oc.width * iStep > width) {
        oc.width *= iStep;
        oc.height *= iStep;
    octx.drawImage(img, 0, 0, img.width, img.height, 0, 0, oc.width, oc.height);
    console.log('Resized to: height: ' + oc.height + '; width: '+oc.width);

}

oc.width = width;
oc.height = oc.width * img.height / img.width;

octx.drawImage(img, 0, 0, oc.width, oc.height);

sDataString = oc.toDataURL("image/jpeg", .8);

// Followed by an ajax upload

The images that are uploaded are mostly artpieces of around 20k quality.

Do you guys/girls have any idea how I can solve the black images?

Mark
  • 31
  • 1
  • 3
  • Have you tried to resize the image in the canvas? Or is it mandatory to show the image using the original size? – Teemu Apr 04 '19 at 11:25
  • The original image just have to upload, but that's already done before this part. – Mark Apr 04 '19 at 11:26
  • Yes (actually downloaded at that stage) , but is it possible to show a smaller, i.e. scaled image in the canvas? – Teemu Apr 04 '19 at 11:27
  • Yes, it is possible – Mark Apr 04 '19 at 11:28
  • Maybe [this SO answer helps](https://stackoverflow.com/a/53525555/1169519)? If you're going to upload the canvas to a server later, you'd need to resize it anyway, unless you're going to create a partial uploading. – Teemu Apr 04 '19 at 11:30
  • Sadly that doesn't seem to work. When resizing the browser freezes for a moment and gives the page that it stopped working – Mark Apr 04 '19 at 12:22
  • That's too bad, the snippet was tested with 8MB images if I can recall correctly, those are yet working fine with that code. – Teemu Apr 04 '19 at 12:27
  • Yes I noticed those are working fine. Even 100MB images of around 10000x10000pixels are working fine. They even are really fast to resize. It's just the larger images that struggle – Mark Apr 04 '19 at 12:36
  • Not sure if this helps, but have you checked the browser uses hardware graphics acceleration instead of software, and the GPU is capable to handle these huge images ..? Also memory consumption might temporarily reach the browser limit ..? – Teemu Apr 04 '19 at 12:37

0 Answers0