javascript - 如何增加 Canvas 位深度以在 javaScript 中创建更高质量的图片？以及输出时如何增加 Canvas 大小

Question

我是 HTML5 和 JavaScript 的新手，我正在尝试使用 canvas 元素创建高质量的输出图像。

1. 目前的目的是让用户拥有自己的所有图像(jpeg、png、svg)。这就像一个魅力。但是，当我渲染图像时，它始终是 32 位 png。如何使用 JavaScript(最好)创建更高质量的图片？
2. 当我输出文件时，它似乎总是与 Canvas 保持相同的分辨率，我如何使用 JavaScript 更改它(最好)

先谢谢大家，我环顾四周但找不到答案:(

Answer 1

如果您想使用 getImageData 或 toDataURL 创建更大的图像，那么您必须:

1. 创建一个比普通 Canvas 大的内存 Canvas
2. 将整个场景重新绘制到内存 Canvas 上。您可能希望在内存上下文中调用 ctx.scale(theScale, theScale) 以缩放图像，但这在很大程度上取决于它们最初是如何创建的(图像？ Canvas 路径？)
3. 在内存 Canvas 上调用 getImageData 或 toDataURL，而不是您的普通 Canvas

内存 Canvas 是指:

var inMem = document.createElement('canvas');
// The larger size
inMem.width = blah;
inMem.height = blah;