缩放画布，以便缩放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（画布有效<canvas>来源）将第一个<canvas>绘制到第二个drawImage()

• 保存第二个<canvas>