HTML5圖像適合發佈在畫布上

我正在研究HTML5移動應用程序。我正在使用畫布元素和文件上傳元素。每當用戶從手機上點擊這個文件上傳元素。他看到兩種選擇。 1.選擇現有的照片 2.拍攝新照片HTML5圖像適合發佈在畫布上

如果他選擇現有的照片，這是固定好我的畫布，但如果他點擊新照片，它不適合畫布。寬度很好，但畫布中顯示的點擊圖片的高度不超過50像素。

我的HTML代碼：

我的JavaScript代碼

function PreviewImage() { 
    var oFReader = new FileReader(); 
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 
    oFReader.onload = function (oFREvent) { 
     var canvas = document.getElementById('myCanvas'); 
     ctx = canvas.getContext('2d'); 
     ctx.clearRect(0, 0, 270, 300);    
     imageUrl = oFREvent.target.result; 
     var base_image = new Image(); 
     base_image.src = imageUrl; 
     base_image.onload = function() { 
     ctx.drawImage(base_image, 0, 0, 270, 300); 
    } 
    }; 
}

找遍許多網站也沒有找到這個問題的解決方案。有什麼幫助嗎？

來源

2014-09-11 Bilal Ahmed

我們可以看到一個實例嗎？ – 2014-09-11 13:41:11

圖像被擠向頂部。 – 2014-09-11 13:44:44

它發生在特定的瀏覽器中嗎？ – FriendlyGuy 2014-09-11 14:57:22

我在PreviewImage功能注意到的第一件事是在圖像被繪製在畫布上：

ctx.drawImage(base_image, 0, 0, 270, 300);

最後兩個CanvasRenderingContext2D.drawImage屬性將調整圖片的大小，而忽略縱橫比， 270 x 300.如果您刪除它們，圖像將以其原始大小呈現。

ctx.drawImage(base_image, 0, 0);

要在畫布的寬度內適合圖像使用下面的：

ctx.drawImage(base_image, 0, 0, canvas.width, base_image.height * (canvas.width/base_image.width));

作爲用於圖像與奇異高度（〜50像素），可以是與在iOS特定問題渲染超過2MB的圖像進行二次採樣。有關更多信息，請參閱HTML5 Canvas drawImage ratio bug iOS。

來源

2014-09-15 15:28:52

謝謝。我嘗試這個解決方案。 – 2014-09-16 07:16:55

HTML5圖像適合發佈在畫布上

回答

相關問題