Question

在尝试使用跨浏览器的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有一个任意规则，不允许我发布图片，直到我有更高的声誉！

任何想法都会受到赞赏！

Answer 1

Safari中的问题可能是对源大小的敏感度，您指定为源的区域与可用的位图。

例如，示例中的源代码为：

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

这意味着位图的高度必须是25 + 277像素，当然情况并非如此，因为输入图像的高度仅为277像素。

尝试将源区域调整为图像内部，在这种情况下，使用y offset减小高度：

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

画布context.drawImage跨浏览器的差异？

1 个答案: