1

我目前有一个 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;

    }
4

0 回答 0