Nit*_*roi 6 javascript html5 canvas drawimage
在尝试使用跨浏览器的HTML5 canvas API缩放和裁剪图像时,我遇到了一个非常奇怪的问题.
具体来说,我正在尝试找到图像的中心,并使用上下文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
代码在Safari中的画布上不显示任何内容,但它可以在Chrome中正确缩放和裁剪图像.
我会上传图片,但stackoverflow有一个任意规则,不允许我发布图像,直到我有更高的声誉!
任何想法在这里将不胜感激!
小智 7
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);
| 归档时间： |
|
| 查看次数： |
1693 次 |
| 最近记录： |