Question

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

使用Canvas2D完成图像创建。

将图像提交给服务器我使用从canvas.toDataURL（类型，质量）收到的图像数据字符串，然后服务器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和移动设备的时代，我发现很难相信我无能为力。

有没有人有解决方案？非常感谢!!!

Answer 1

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

如果它不是alpha问题且fillStyle解决方法没有解决问题，您可以尝试使用像here找到的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
  }
}

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

1 个答案: