缩放画布，以便 base64 toDataURL() 也被缩放答案

【问题标题】：Scale a Canvas so that the base64 toDataURL() is scaled as well缩放画布，以便 base64 toDataURL() 也被缩放
【发布时间】：2013-04-06 16:34:58
【问题描述】：

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

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

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

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

然后输出canvas.toDataURL('image/jpeg', 0.8);图片大小和没有缩放的一样。我错过了什么？如何缩放图像？

【问题讨论】：

这很可能是因为context.scale(.75,.75); 不会改变canvas.width 和canvas.height。您的缩放图像是否产生完全相同的结果或是否有边框？您可能想要重新绘制而不是使用此方法。

【解决方案1】：

如果你想得到一个缩小版的<canvas>：

创建第二个<canvas> width 所需的宽度和要捕获的高度
使用https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images#Scaling 将第一个<canvas> 绘制到第二个<canvas>（画布有效drawImage() 源）
保存第二个<canvas>

【讨论】：