canvas context.draw跨瀏覽器的圖像差異？

在跨瀏覽器使用HTML5 canvas API嘗試縮放和裁剪圖像時，我正面臨一個非常奇怪的問題。canvas context.draw跨瀏覽器的圖像差異？

具體來說，我有嘗試基於它的寬度和高度使用這些參數作爲specified上下文API

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

這裏找到一個圖像的中心和裁剪方工作的的一個例子代碼我使用：

<!DOCTYPE html> 
<html> 
<body> 

<p>Image to use:</p> 
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream"> 

<p>Canvas:</p> 
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 

<script> 
window.onload = function() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 
    ctx.drawImage(img, 0, 25, 220, 277, 0, 0, 150, 188); 
} 
</script> 

</body> 
</html>

你可以在這裏嘗試演示： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage2

的C ode在Safari上不顯示畫布上的任何內容，但它可以在Chrome中正確縮放和裁剪圖像。

我會上傳圖片，但stackoverflow有一個任意的規則，不允許我發佈圖片，直到我有更高的聲譽！

這裏的任何想法，將不勝感激！

來源

2015-04-14 Nitya Oberoi

在什麼瀏覽器中有什麼不同？ – adeneo

在Chrome上，它正確渲染並顯示縮放/裁剪圖像，但在Safari和Firefox上，它在畫布上顯示一個空白方塊。 –

以下是兩張圖片的鏈接： Safari：http://cl.ly/image/3e051H2s2l0b Chrome：http://cl.ly/image/2M3H2J1U0X15 同樣，我無法將它們添加到帖子中，因爲我沒有足夠的聲望。 –

Safari中的問題可能會對源大小，即您指定的源區域與可用位圖區域敏感。

例如，在該示例的源說：

//  source: x, y , w , h 
ctx.drawImage(img, 0, 25, 220, 277, ...

這將意味着該位圖必須是25 + 277個像素的高度，這當然不是這種情況作爲輸入圖像僅277個像素身高。

嘗試調整源區是圖像裏面，在這種情況下降低高度與y偏移：

ctx.drawImage(img, 0, 25, 220, 277-25, 0, 0, 150, 188);

要裁剪始終確保源區是在圖像內，f.ex.如果你想從所有方向裁剪10個像素：

var iw = img.naturalWidth; 
var ih = img.naturalHeight; 
var crop = 10; 

ctx.drawImage(img, crop, crop, iw - crop*2, ih - crop*2, 0, 0, 150, 188);

來源

2015-04-14 17:25:12 K3N

啊，那樣做！我只需要通過我創建的偏移量來降低高度$ ctx.drawImage（img，0,25,220,252,0,0,150,188）;並且工作。謝謝！ –

@NityaOberoi沒問題！ :) – K3N

canvas context.draw跨瀏覽器的圖像差異？

回答

相關問題