Question

我目前有一个canvas html5元素设置来接收上传的图像，调整它的大小，并将其数据uri传递给表单值，然后将其提交给服务器。这在计算机上运行良好，但在我通过Safari在iPhone上测试时遇到了问题。

在上传图片时使用新的IOS 6.0.1更新，我可以选择“拍摄照片或视频”，但是从iPhone上这样做时会出现两个问题（我没有iPad方便测试:(）..

1）图像显示为压扁或“未完成”，因为图像的前1/3仍为

我删除了我的context.scale（）函数，但这些问题没有出现。在iphone上进行缩放是否有一些处理限制设备？一个简单的context.scale（0.5,0.5）似乎不起作用。

2）旋转图像（当删除context.scale（）时，此问题仍然存在。）

我读过这张图片可能会保留一些方向数据，但如何将其删除？

这些问题似乎只有在我“拍照”或使用我的iPhone拍摄的图像时才会被隔离。当使用从我的电脑下载的图像到我的iPhone上时，问题1）或2）似乎都没有问题。此外，当我使用iPhone拍摄的照片，发送到我的电脑，然后从电脑上传时，似乎也没有任何问题。

对于问题1）因为我的计算机使用了相同的图片（没有问题）和iPhone（问题）我冒昧地猜测它是对context.scale（）的iPhone限制，除非通过电子邮件发送图像我的iPhone以某种方式压缩它并删除方向数据，这在我的计算机使用时也不是问题。你可以看到我很困惑！谢谢你的帮助！

我的画布调整大小...

        reader.onload = function(e) {
      preview.html('<img id="scream" src="' + e.target.result + '" ' + (preview.css('max-height') != 'none' ? 'style="max-height: ' + preview.css('max-height') + ';"' : '') + ' />')
      element.addClass('fileupload-exists').removeClass('fileupload-new')

      var canvas = document.createElement("canvas"),
          context = canvas.getContext("2d"),
          image = new Image();

      image.onload = function () {
          var img = this,
              width = img.width,
              height = img.height;

          canvas.width = 300;
          canvas.height = 300;

          context.scale(0.25, 0.25);
          context.drawImage(img, 0, 0);
          var base64 = canvas.toDataURL();
          //console.log(base64);

          //$('form_6').val(base64);

          document.body.appendChild(canvas);
      };
      image.src = e.target.result;

    }

iPhone IOS 6.0.1“拍照”图像在Canvas HTML5中损坏

0 个答案: