从画布设置图像大小

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();
  });
});

我无法改变画布的大小。 在我的小提琴中你可以看到DOM中的图像大小已经改变，但是当我下载它时，由于画布大小，图像只有200x200像素。 我错过了什么？

Answer 1

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

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

 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> 

Answer 2

您是否尝试过使用画布上下文并对其进行缩放，然后将其另存为图像？

context.scale

Answer 3

@Kurumi，您的代码可以以某种方式工作，但更好地添加onload方法

        var img = new Image();
        img.src = c.toDataURL('image/jpeg');
        var img2 = '';
        img.onload = function () {
            img2 = resizeImage(img, oWidth, oHeight);
            var link = document.createElement('a');
            img2.onload = function () {
                link.href = img2.src;
                link.download = 'study-chart.jpeg';
                link.click();
            }
        }