通過畫布html5調整圖像無法在iPhone 6或7上工作，但在Android上工作？

Question

在Android手機上&使用谷歌瀏覽器的平板電腦，此代碼將正常工作並正確調整圖像大小並將其顯示在屏幕上。在iPhone上，圖像拒絕顯示在屏幕上。我懷疑toDataURL但不確定問題出在哪裏。 Canvas可能無法在iPhone 6上正常工作（我同時測試了這兩個版本）。

$("body").on("change",".pictureinputfile",function(){ 
        var cid = $(this).attr('cid'); 
        var num = $(this).attr('num'); 

        //Equivalent of getElementById 
        var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array. 

        var file = fileInput.files[0]; //there is only '1' file since they are not multiple type. 

        var reader = new FileReader(); 

        reader.onload = function(e) { 
         // Create a new image. 
         //var img = new Image(); 

         var img = document.createElement('img'); 

         img.src = reader.result; 
         img.id = "pictureinputfileimage"+cid+"_"+num; //not used just for unique reference. 
         img.setAttribute("class","pictureinputfileimage pictureinputfileimage"+cid); 
         img.setAttribute("style","width:320px;height:240px;"); 
         img.setAttribute("cid",cid); 
         img.setAttribute("num",num); 

         //The resultsDIV will remember the pictures for us once it's placed. 
         //localStorage['picInput'+cid+"_"+num] = reader.result; 

         var canvas = document.createElement('canvas'); 
         var ctx = canvas.getContext('2d'); 
         ctx.drawImage(img, 0, 0); 

         var MAX_WIDTH = 640; 
         var MAX_HEIGHT = 480; 
         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 ctx = canvas.getContext("2d"); 
         ctx.drawImage(img, 0, 0, width, height); 

         var shrinked = canvas.toDataURL('image/jpeg'); 

         img.src = shrinked; 

         img.onload = function() { 
          //console.log("image loaded"); 

          $('.fileDisplayArea'+cid).each(function(index,element){ 
           //console.log("set to html"); 
           var numOfElement = $(this).attr("num"); 
           if(numOfElement==num){ 
            $(this).html(img); 
           } 
          }); 

          destroyGraphicalState(); 

          //Store HTML as it is now without button classes. 
          localStorage.resultsDiv = $('#results').html();//have to clean up classes on button elements. 

          //Restore buttons and graphics states for current session back to normal. 
          restoreGraphicalState(); 
         } 
        } //End reader.onload 

        reader.readAsDataURL(file);//attempts to read the file in question. 

        // 
       }); 

Answer 1

環顧四周，我找到了答案。

https://github.com/stomita/ios-imagefile-megapixel

使用這個庫解決了該問題，以及怪異的垂直拉伸的問題。

$("body").on("change",".pictureinputfile",function(){ 
        var cid = $(this).attr('cid'); 
        var num = $(this).attr('num'); 

        //Equivalent of getElementById 
        var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array. 

        var file = fileInput.files[0]; //there is only '1' file since they are not multiple type. 

        var mpImg = new MegaPixImage(file);//loads the image. 

        //define an image to work with. 
        var img = new Image(); 
        img.id = "pictureinputfileimage"+cid+"_"+num; //not used just for unique reference. 
        img.setAttribute("class","pictureinputfileimage pictureinputfileimage"+cid); 
        img.setAttribute("style","width:320px;height:240px;"); 
        img.setAttribute("cid",cid); 
        img.setAttribute("num",num); 

        mpImg.render(img, { maxWidth: 640, maxHeight: 480, quality: 0.5 });//creates the image correctly. 

        $('.fileDisplayArea'+cid).each(function(index,element){ 
         //console.log("set to html"); 
         var numOfElement = $(this).attr("num"); 
         if(numOfElement==num){ 
          $(this).html(img); 
         } 
        }); 

        destroyGraphicalState(); 

        //Store HTML as it is now without button classes. 
        localStorage.resultsDiv = $('#results').html();//have to clean up classes on button elements. 

        //Restore buttons and graphics states for current session back to normal. 
        restoreGraphicalState(); 
       });