HTML5中的drawImage()Canvas无法按预期工作

问题描述 投票:0回答:1

我有一个Base64图像,这是我的图像的一部分。如果我使用图像的原始宽度和高度来裁剪图像的右侧部分,它将按预期工作。但是,如果我缩小图像但使用新的缩小的高度和宽度,裁剪将无法按预期工作。我已经模仿了同样的here

html5-canvas
1个回答
1
投票

Documentation说:ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);,前者代表源图像。

要使作物彼此相似,您需要保持sx,sy,sWidth,sHeight。所以你得到:

ctx.drawImage(img,0,0,179,201,127,40,61,50);

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" width="251" height="201" src="data:image/png;base64,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">

<p>Canvas:</p>
<canvas id="myCanvas" width="1562" height="648" 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,0,179,201,127,40,61,50);
    ctx.drawImage(img,127,110,61,50);
    
    ctx.drawImage(img,0,0,179,201,497,40,179,201);
    ctx.drawImage(img,497,240,251,201);
}
</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p>

</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.