尝试通过 canvas.toDataURL 压缩 img

Question

I'm trying to work out img/canvas scaling but it's not working.

I've got an image, and I want to compress it, so I'm using canvas to do this using the following code:

<img id='srcimg'>
<img id='copyimg'>

And

function doSendToCanvasThenCopyImg(srcimg, destimg) {
  var scale = 1;
  var natW = srcimg.naturalWidth;
  var natH = srcimg.naturalHeight;
  var newCanvas = document.createElement('canvas');
  newCanvas.width = parseInt(natW * scale);
  newCanvas.height = parseInt(natH * scale);

  var ctx = newCanvas.getContext("2d");
  ctx.drawImage(srcimg, 0, 0, natW, natH, 0, 0, newCanvas.width, newCanvas.height);

  var base64 = newCanvas.toDataURL('image/jpeg', 1);
  destimg.src = base64;
}

And

function scaleToFit(img, newW, natW, natH) {
  var scale = newW / natW;

  var newCanvas = document.createElement('canvas');
  var ctx = newCanvas.getContext("2d");
  ctx.drawImage(img, 0, 0, natW, natH, 0, 0, parseInt(natW * scale), parseInt(natH * scale));

  var base64 = newCanvas.toDataURL('image/jpeg',1);
  img.src = base64;
}

But this seems to only show the top left corner of the src image. Why is this and how can I get the whole image?

Secondly, I am trying to measure the diskspace size of the image, so I use the function:

function getImageSize(img) {
  var can = document.createElement('canvas');
  var natW = img.naturalWidth;
  var natH = img.naturalHeight;
  can.width = natW;
  can.height = natH;
  var ctx = can.getContext("2d");
  ctx.drawImage(img, 0, 0, natW, natH, 0, 0, natW, natH);
  var base64 = can.toDataURL('image/jpeg',1);
  return base64.length;
}

But this seems to result in an incorrect result - after the copy the img [base64] src is blank - can anyone help?

I have a running sample found on https://jsfiddle.net/Abeeee/9bzk7h6w/ (sorry - it includes a very large base64 image as I couldn't find a way to include images in jsfiddle and external images will cause security issues with the script).

1. When running the sample, and clicking [Run step 1] I see the resulting image as expected but with indicated image sizes wrongly stated.
2. When running the sample, and clicking [Run step 1 and 2] I see only the partial result.

To recap - I'm trying to resize an image in JavaScript and want to see the resulting file size as I go.

What goes on?

Answer 1

Ok, it looks like the partial-result image is caused by two issues - a) the newCanvas needed to have.width and.height set,

function doSendToCanvasThenCopyImg(srcimg, destimg) {
  var scale = 1;
  var natW = srcimg.naturalWidth;
  var natH = srcimg.naturalHeight;
  var newCanvas = document.createElement('canvas');
  newCanvas.width = parseInt(natW * scale);            <----------
  newCanvas.height = parseInt(natH * scale);           <----------

  var ctx = newCanvas.getContext("2d");
  ctx.drawImage(srcimg, 0, 0, natW, natH, 0, 0, newCanvas.width, newCanvas.height);

  var base64 = newCanvas.toDataURL('image/jpeg', 1);
  destimg.src = base64;

b) the call to doSendToCanvasThenCopyImg seems to need to wait for the copyimg to be loaded before being processed

  var done=false; // bit quick and nasty but prevents the scaleToFit from recursively triggering onload
  copyimg.onload = function() {
    if ( !done ) {
      done=true;
      var destW = 500;
      scaleToFit(copyimg, destW, srcimg.naturalWidth, srcimg.naturalHeight);
    }
  }