javascript - 缩放画布，以便 base64 toDataURL() 也被缩放

Question

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

如果我然后用 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>您要捕获的第二宽度所需的宽度和高度

• 使用https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images#Scaling绘制第 1<canvas>到第 2 （画布是有效来源）<canvas>drawImage()

• 保存第二<canvas>