Question

我的问题是ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);，{strong>当sx或sy为负时，IE浏览器和Edge浏览器似乎都没有显示任何图片一点都不如果swidth或sheight大于img的尺寸，IE和Edge都不会显示图片。

我有一些代码很像这里的代码：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage3

这是该网站代码的副本：

<!DOCTYPE html>
<html>
<body>

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

<p>Canvas:</p>
<canvas id="myCanvas" width="300" 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, -50, -100, 600, 400, 10, 10, 150, 160); //In Chrome, this will zoom out from the image, in Edge or IE 11, the image won't even appear on screen.
};
</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p> //That's fine, I'm just here about IE 11 today.

</body>
</html>

我正在尝试裁剪任意图像，这些图像可能很高，很粗，很宽，很短，因此它们适合正方形。
像这样：

我如何裁剪IE和Edge中的图像以适应正方形，以便我在其周围添加空白区域？似乎微软只是期望我要放大图像，而不是缩小。注意：这在Chrome和Firefox中效果很好。

Answer 1

我在IE，Chrome，FX和Edge中获得完全相同的结果。检查您在每个浏览器中使用的值（50,0,150,200,10,10,150,160）...还要检查每个浏览器的缩放设置是否相同以及显示DPI设置...要在画布中缩放图像，您可以使用转换方法

如何在Edge＆amp;中裁剪图像IE 11缩小（负sx / sy或swidth / sheight太大）

1 个答案: