javascript - 设置 Canvas 中图像的大小

Question

所以我在我的项目中使用 Protractor ，在我的测试中我想将 Canvas 元素转换为具有特定大小的图像。我降低了转换率，但似乎无法更改图像的大小。这是我的代码:

it('should save an image', function(done) {
  //because of Protractor
  browser.driver.executeScript(function () {
    var can = document.querySelector('#workspace-canvas');
    var data = can.toDataURL("image/png");

    var image = new Image();
    image.width = 500;
    image.height = 500;
    image.src = data;
    console.log(image.height, image.width); //1122 1888
    var link = document.createElement('a');
    link.href = image.src;
    link.download = 'study-chart.png';
    link.click();

    return data;
  }).then(function (result) {
    browser.sleep(2000);
    done();
  });
});

我无法更改 Canvas 的大小。在我的 fiddle你可以看到 DOM 中的图像大小发生了变化，但是当我下载它时，由于 Canvas 大小，图像只有 200x200 像素。我错过了什么？

Answer 1

问题是调整图像元素的宽度和高度实际上并没有改变它的原始大小。在浏览器中显示时会显得更大，但图像的原始大小仍然是 Canvas 的大小。

我已经修改了您的 fiddle ，以向您展示如何通过动态创建具有指定宽度和高度的新 Canvas 并在其上绘制原始图像来创建具有所需大小的新图像。

var can = document.querySelector('#canvas1');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 50, 50);

var img = new Image();
img.src = can.toDataURL();
var link = document.createElement('a');
var img2 = resizeImage(img, 500, 500);
link.href = img2.src;
link.download = 'study-chart.png';
link.click();


function resizeImage(img, w, h) {
  var result = new Image();
  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  canvas.getContext('2d').drawImage(img, 0, 0, w, h);
  result.src = canvas.toDataURL();
  return result;
}

canvas {
  border: 1px solid gray;
}

<canvas id="canvas1" width="200" height="200"></canvas>