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

Question

我有一个用JavaScript写的微信平台的小webapp，用户可以在上面创建一些图片并提交到服务器。

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

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

在我有机会尝试的所有手机上都运行良好（三星 S3/4/5、小米、华为荣耀、联想、Nexus 4/5、iPhone 4S/5/5S/6/6S , iPad...), 没有问题。客户的 Samsung Note 2 除外。

他们的设备运行 Android 4.3 和 up-to-date 微信 (6.2.6) 就像在我的 Android 手机上一样。然而，当他们提交图片时，文件大小增加了 6-7 倍。

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

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

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

我已经设置了PHP接收这个数据字符串的脚本，记录日志，header中的内容，接收的字符串大小等，我可以清楚地看到只有当客户端提交图像，收到 header 是 "image/png"，无论 javascript 中的代码设置为 "image/jpeg"。

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

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

我很纳闷，我做错了什么？我已经检查过规范，自 Android 3.4

以来应该支持 toDataURL

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

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

有人有解决办法吗？非常感谢！！！

Answer 1

你是对的。您的浏览器似乎是运行您的代码可能 returns PNG，因为它不处理 JPEG。您可以阅读完全相同的情况 here. Another reason could possibly be that you have an alpha channel present in the image and the browser does not support coercing to JPEG if there is any alpha channel present. You can potentially get around this by setting the fillStyle to white. Read more about that here.

如果这不是 alpha 问题并且 fillStyle 解决方法不起作用，您可以尝试使用 here 中找到的那种 JPEG 编码器并执行如下操作（修改自在第一个 link 到 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
  }
}

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

How to create JPG data string with toDataURL on Samsung Note 2

javascript

canvas

jpeg

todataurl