0

我有一个用 JavaScript 为微信平台编写的小型 webapp，用户可以在其中创建一些图像并将其提交到服务器。

图像创建是使用 Canvas2D 完成的。

将图像提交到服务器我使用从 canvas.toDataURL(type,quality) 收到的图像数据字符串，然后服务器 PHP 脚本在从 webapp 接收到的服务器端创建二进制 JPG 文件。

在我有机会尝试的所有手机（三星 S3/4/5、小米、华为荣耀、联想、Nexus 4/5、iPhone 4S/5/5S/6/6S、iPad ......）上一切正常，没有问题. 客户的三星 Note 2 除外。

他们的设备运行 Android 4.3 和最新的微信（6.2.6），就像在我的 Android 手机上一样。但是，当他们提交图片时，文件大小会大 6-7 倍。

我检查并实际收到的文件是 PNG，而不是 JPG。

我用来从 Canvas2D 图像中获取图像数据字符串的代码是：

var jpgData = this.finalPicCanvas.toDataURL("image/jpeg",0.5);

我已经设置了接收这个数据字符串的PHP脚本，写下日志，标题中的内容，接收到的字符串大小等，我可以清楚地看到只有当客户端提交图像时，接收到的标题是“image/png”，不管在 javascript 代码中设置为“image/jpeg”。

这是显示 png 标头和大数据大小的日志： http: //snag.gy/ma39y.jpg

这是显示 jpg 标头和正常数据大小的日志： http: //snag.gy/enPvZ.jpg

我很纳闷，我做错了什么？我已经检查了规范，并且自 Android 3.4 起应该支持 toDataURL

我从 2011 年发现这个规范，浏览器必须支持 PNG，但它们不需要支持任何其他格式，并且如果提供的类型无法识别，它将返回 PNG：http ://www.w3.org/TR/ 2011/WD-html5-20110405/the-canvas-element.html#dom-canvas-todataurl

然而，考虑到这是 2015 年，WebGL 和移动设备的时代，我很难相信我无能为力。

有没有人有解决方案？高度赞赏！！！

4

1 回答 1

1

你是对的。看起来您正在运行代码的浏览器可能会返回 PNG，因为它不处理 JPEG。您可以在此处阅读完全相同的情况。另一个原因可能是图像中存在 alpha 通道，如果存在任何 alpha 通道，浏览器不支持强制转换为 JPEG。您可以通过将 设置fillStyle为白色来解决此问题。在此处阅读更多相关信息。

如果这不是 alpha 问题并且fillStyle解决方法不起作用，您可以尝试使用此处找到的 JPEG 编码器并执行以下操作（根据 GitHub 问题的第一个链接的线程中的代码修改） ：

var toDataURLFailed = false,
    encoder,
    url;

try {
  url = canvas.toDataURL('image/jpeg', 0.5);
} catch (e) {
  // android may generate PNG
  toDataURLFailed = true;
}

if (toDataURLFailed || url.slice(0, 'data:image/jpeg'.length) !== 'data:image/jpeg') {
  try {
    encoder = new JPEGEncoder();
    url = encoder.encode(ctx.getImageData(0, 0, width, height), 100);
  } catch (e) {
    // everything has failed here - do whatever you want in this case
  }
}
于 2015-09-19T05:26:29.640 回答