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

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

Answer 1

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

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

  var can = document.querySelector（'＃canvas1'）;＆＃xD;＆＃xA; var ctx = can.getContext（'2d'）;＆＃xD ;＆＃xA; ctx.fillRect（50,50,50,50）;＆＃xD;＆＃xA;＆＃xD;＆＃xA; var img = new Image（）;＆＃xD;＆＃xA; img.src = can.toDataURL（）;＆＃xD;＆＃xA; var link = document.createElement（'a'）;＆＃xD;＆＃xA; var img2 = resizeImage（img，500,500）; ＆＃xD;＆＃xA; link.href = img2.src;＆＃xD;＆＃xA; link.download ='study-chart.png';＆＃xD;＆＃xA; link.click（）; ＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆＃xD;＆＃xA;函数resizeImage（img，w，h）{＆＃xD;＆＃xA; var result = new Image（）;＆＃xD;＆＃xA; var canvas = document.createElement（'canvas'）;＆＃xD;＆＃xA; canvas.width = w;＆＃xD;＆＃xA; canvas.height = h;＆＃xD;＆＃xA; canvas.getContext（'2d'）。drawImage（img，0,0，w，h）;＆＃xD;＆＃xA; result.src = canvas.toDataURL（）;＆＃xD;＆＃xA;返回结果;＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

  canvas {＆＃的xD;＆＃XA; border：1px solid grey;＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

 < code>＆lt; canvas id =“canvas1”width =“200”height =“200”＆gt;＆lt; / canvas＆gt;

＆＃xD;＆＃xA;

＆＃xD ;＆＃XA;

＆＃的xD;＆＃XA;

＆＃XA;

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

从画布设置图像大小

3 个答案: