javascript - 如何在 Samsung Note 2 上使用 toDataURL 创建 JPG 数据字符串

Question

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

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

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

在我有机会尝试过的所有手机上都表现良好(三星 S3/4/5、小米、华为荣耀、联想、Nexus 4/5、iPhone 4S/5/5S/6/6S、iPad...) ， 没有问题。客户的 Samsung 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 和移动设备的时代，我很难相信自己无能为力。

有人有解决办法吗？高度赞赏!!!

Answer 1

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

如果这不是 Alpha 问题，并且 fillStyle 解决方法无法解决问题，您可以尝试使用 JPEG 编码器，例如 here 中发现的编码器。并执行类似以下操作(根据 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
  }
}