用HTML5畫布調整圖像大小 - 扭曲

我正在研究一個Webworks應用程序，我需要調整圖像大小以便上傳到服務器。我使用的是JQuery Mobile，應用程序需要在OS6上運行。用戶可以使用相機或從設備上選擇圖像。相關代碼如下：用HTML5畫布調整圖像大小 - 扭曲

function handleOpenedFile(fullPath, blobData) { 
      var image = new Image(); 
      image.src = fullPath; //path to image 
      image.onload = function() { 
       var resized = resizeMe(image); // send it to canvas 
       //Do stuff with the DataURL returned from resizeMe() 
      }; 
    } 

function resizeMe(img) { 

     var canvas = document.createElement('canvas'); 
     var width = Math.round(img.width/2); 
     var height = Math.round(img.height/2); 
     canvas.width = width; 
     canvas.height = height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0, width, height); 
     return canvas.toDataURL("image/jpeg", 0.8); 
    }

然後我使用DataURL中的Base64上傳到服務器。圖像縮小但出現亂碼。圖像的一部分被轉移，顏色變得很奇怪。如果您在畫布上繪製圖像而不進行任何縮放，則圖像出現亂碼並不是縮放本身。

我已經搜索過SO和BB開發論壇廣泛沒有運氣。

有沒有人有任何想法如何解決這個問題或有一個替代的建議調整圖像上傳？

來源

2013-07-19 Iyashu5040

男人，哦，男人。這個問題對我來說是一個討厭的問題。去年秋季推出了iOS 6，增加了從相機/相機膠捲進行拍攝的功能。我還需要用Canvas調整大小。執行大小調整/旋轉時，畫布大小調整造成嚴重問題。看看這篇文章：http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios。最後，我寫了一個小型庫來解決問題，與此類似（但在此之前）：https：//github.com/stomita/ios-imagefile-megapixel。 –

對不起，筆記本電腦在我提交我的更多相關評論之前死亡。在iOS上，由於大圖像上的二次採樣，問題才發生。快速谷歌搜索顯示，在黑莓手機上，至少有一個人有大圖像的一些問題http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Problem-JavaScript-amp-Canvas-cannot-process - 大圖像-GT/TD-p/2128847。您可以將小圖像（比如100 x 100像素）下載到您的設備上，選擇該圖像，然後查看是否有相同的問題。 –

謝謝你的建議，我看了一下BB論壇的主題，試了一下沒有成功的百萬像素庫。我用我找到的解決方案回答了我自己的問題。 – Iyashu5040

我已經設法解決這個問題，儘管爲什麼它令我困惑不解。只需使用

return canvas.toDataURL();

這將返回沒有任何奇怪的視覺假象編碼字符串與正確調整圖像64基取代

return canvas.toDataURL("image/jpeg", 0.8);

。

來源

2013-07-22 09:56:00 Iyashu5040

無法幫助使用JQuery移動設備，在OS6上運行的應用程序或在DataURL中使用Base64上傳到服務器，但您的代碼爲resizeMe函數不會將畫布放置在任何HTML文檔中。

下面添加了必要的行。

功能resizeMe（IMG）{

var canvas = document.createElement('canvas'); 
    var width = Math.round(img.width/2); 
    var height = Math.round(img.height/2); 
    canvas.width = width; 
    canvas.height = height; 
    var ctx = canvas.getContext("2d"); 
    document.body.appendChild(canvas); //append canvas child to body <<<<----------- 
    ctx.drawImage(img, 0, 0, width, height); 
    return canvas.toDataURL("image/jpeg", 0.8); 
}

如果這個額外的行中的jsfiddle是錯過了下面你拿不出圖像可言，有了它，你得到正確形成縮放圖像。小提琴適用於我的andriod智能手機。

http://jsfiddle.net/FeALQ/

來源

2013-07-19 16:50:51 jing3142

我從來沒有真的想要顯示圖像，我只是使用畫布來縮小圖像，以最大限度地減少上傳數據時的成本。將嘗試一下，並讓你知道發生了什麼。 – Iyashu5040

感謝您的建議，它幫助我意識到toDataURL方法是這種情況下的罪魁禍首。如果我可以的話，會upvote :) – Iyashu5040

用HTML5畫布調整圖像大小 - 扭曲

回答

相關問題