2

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

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

在此先感谢各位，我环顾了一会儿，但找不到答案:(

4

2 回答 2

3

如果要使用 getImageData 或 toDataURL 创建更大的图像，则必须：

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

通过内存画布，我的意思是：

var inMem = document.createElement('canvas');
// The larger size
inMem.width = blah;
inMem.height = blah;
于 2012-10-15T03:10:18.110 回答
-1

首先，当您将图像绘制到画布上时，它还不是 png，它是一个简单的原始位图，在您调用它的方法时画布 API 会在其中工作，然后将其转换为 png 以便浏览器显示它，这就是您使用toDataURL. 使用时，toDataURL您可以选择希望输出的图像格式，我认为 jpeg 和 bmp 与 png 一起支持。（不要将其视为转换为另一种格式的 png，因为它不是）

而且我不知道通过向像素添加更多位来提高质量到底是什么意思，您会看到 32 位足以让所有 RGBA 通道拥有真彩色 8 位深度，为您提供比人眼更多的颜色马上看。我知道根据用户暴露在您的照片中的照明和角度，他对颜色的感知可能会有所不同，但质量不会有所不同我想说的它只取决于它的分辨率。无论如何，画布并不是为使用那些更深的颜色而设计的，老实说，在你可以在画布上渲染的任何类型的场景中，甚至不需要太多颜色信息，这仅与大型工作室制作的高清电影和游戏有关，也，即使您可以在画布上使用深色，它实际上也取决于用户的视频卡和屏幕的支持，我认为大多数人都没有。

如果您希望添加与每个像素的颜色不直接相关但可能与潜在转换有关的信息，他们可以让您更好地创建自己的类型，能够承载imageData画布 API 可接受的类型，保持其 32 位格式和附加信息在相应的数组上。

是的，输出图像具有与画布相同的分辨率，但提供了几种方法来调整最终构图的大小。正如 Simon Sarris 所说，创建一个屏幕外画布，其分辨率是您希望图像的最终分辨率，然后，您可以：

  1. 通过调用调整光栅图像的大小，同时使用调整大小参数drawImage提供生成的图像toDataURL
  2. 正如西蒙所说，在那里重画你的场景，如果你的构图包含通过画布 API 创建的形状，而不仅仅是放在一起的图像文件，这将减少质量损失

如果您事先知道您想要的最终分辨率，那么只需将画布的宽度和高度设置为它，但 CSS 宽度和高度可以设置不同，以便您的画布按照您的意愿适合您的网页。

于 2012-10-16T03:40:51.940 回答