canvas context.drawImage 跨浏览器的区别？答案

【问题标题】：canvas context.drawImage differences across browsers?canvas context.drawImage 跨浏览器的区别？
【发布时间】：2015-06-20 10:01:58
【问题描述】：

在尝试使用跨浏览器的 HTML5 画布 API 缩放和裁剪图像时，我遇到了一个非常奇怪的问题。

具体来说，我正在尝试通过上下文 API 使用这些参数作为 specified 来找到图像的中心并根据其宽度和高度裁剪一个正方形

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

该代码不会在 Safari 的画布上显示任何内容，但它可以在 Chrome 中正确缩放和裁剪图像。

我会上传图片，但 stackoverflow 有一条任意规则，除非我有更高的声誉，否则我不允许发布图片！

如有任何想法，我们将不胜感激！

【问题讨论】：

这里是两张图片的链接： Safari：cl.ly/image/3e051H2s2l0b Chrome：cl.ly/image/2M3H2J1U0X15 同样，我无法将它们添加到帖子中，因为我没有足够的声誉。

标签： javascript html canvas drawimage

【解决方案1】：

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);

【讨论】：

啊，成功了！我只需要将高度减少我创建的偏移量 $ ctx.drawImage(img, 0, 25, 220, 252, 0, 0, 150, 188);那行得通。谢谢！
@NityaOberoi 没问题！ :)