如何调整画布内容的大小并获取经过调整大小（和压缩后）的图像base64数据？

Question

我正在玩canvas，并创建了一个绘画演示。

现在我可以在画布上绘制东西，并使用.toDataURL()获取数据。

除了图像数据太大之外，一切都完美。而且我只需要一个很小的图纸。

是否可以（甚至可能）将画布调整为较小的版本并加载调整后的图像数据？有点像使用纯JavaScript压缩图像。

例如，我让用户在1000px * 500px的画布上绘制并将其大小调整为50px * 25px。经过调整大小的base64数据将非常小，并且方便进行进一步的网络传输。那就是我想要的。

Answer 1

您让用户在大画布上绘制，然后将大画布作为图像绘制在小画布上。最终，您将获得小画布图像作为数据URI。

不必将小画布附加到DOM。

let bigCanvas_img = document.querySelector("bigCanvas");
smallCanvas_ctx.drawImage(bigCanvas_img,0,0,smallCanvas_w,smallCanvas_h);


let url = smallCanvas.toDataURL();