javascript - 缩放 Canvas 以便 base64 toDataURL() 也被缩放

Question

我正在构建一个 chrome 扩展程序来保存网页的屏幕截图。我已经将屏幕截图拼凑成一个 HTML5 canvas 元素。

如果我随后使用 canvas.toDataURL('image/jpeg', 0.8); 显示图像；它工作正常。

但是，如果我尝试首先通过获取上下文并使用它来缩放图像:

var context = canvas.getContext('2d');
context.scale(.75,.75);

然后输出 canvas.toDataURL('image/jpeg', 0.8); 图像与未缩放的图像大小相同。我错过了什么？如何缩放图像？

Answer 1

如果你想按比例缩小<canvas> :

• 创建第二个 <canvas> width 想要捕获的宽度和高度

• 抽第一名 <canvas>到第二 <canvas>使用 https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images#Scaling ( Canvas 有效drawImage()来源)

• 保存第 2 个 <canvas>