使用FileReader()和Canvas从iOS上传图像失败

时间:2018-11-04 22:59:23

标签: javascript jquery ios canvas mobile

因此,我正在使用FileReader()和Canvas在将图像上传到我们的服务器之前调整图像的大小,因为在我的用户使用此Web应用程序的地方数据连接不良。该代码可在任何台式机浏览器和Android设备上运行,而不能在任何iOS设备上运行。有没有人遇到这个问题,找到了合适的解决方案?

这是我正在使用的代码,它适用于iOS以外的所有内容。

    $.each(files,function(k,v){
      var img = document.createElement("img");
      var canvas = document.createElement('canvas');
      var reader = new FileReader();  
        reader.onload = function(e) {img.src = e.target.result; };
        reader.readAsDataURL(v);

        reader.onloadend = function(){
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);

          var MAX_WIDTH = 800;
          var MAX_HEIGHT = 800;
          var width = img.width;
          var height = img.height;

          if (width > height) {
            if (width > MAX_WIDTH) {
              height *= MAX_WIDTH / width;
              width = MAX_WIDTH;
            }
          } else {
            if (height > MAX_HEIGHT) {
              width *= MAX_HEIGHT / height;
              height = MAX_HEIGHT;
            }
          }

          canvas.width = width;
          canvas.height = height;
          var ctxIMG = canvas.getContext("2d");
          ctxIMG.drawImage(img, 0, 0, width, height);

          var dataurl = canvas.toDataURL("image/jpeg",0.6);
          previewElement.append("<img src='" + dataurl + "' />");
          imageArray[key].push(dataurl);

          if(k == files.length - 1){
            console.log(files.length);
            console.log("Images:");
            console.log(imageArray);
          }
        };
    });

0 个答案:

没有答案