gpt4 book ai didi

javascript - Canvas只保存部分图像并将其奇怪地拉伸(stretch)

转载 作者:行者123 更新时间:2023-12-03 08:28:20 26 4
gpt4 key购买 nike

我之前已经成功地使用了 Canvas ,但是我以前使用过的相同代码突然只绘制了图像的一部分。

Fiddle here.

HTML:

<canvas id="card-texture-canvas"></canvas>
<img src="http://i.imgur.com/VaN8wBY.png" id="background">
<button class="save">Save</button>

JS:

$('.save').click(function () {
var d_canvas = document.getElementById('card-texture-canvas')
var context = d_canvas.getContext('2d')
var background = document.getElementById('background')
context.drawImage(background, 0, 0)
$('#background').hide()
})

通过 CSS,我强制它具有正确的宽度和高度:

#card-texture-canvas {
height: 297px;
width: 200px;
}

但是图像的绘制完全忽略了这一点,而是保存了图像的右上角部分,将其拉伸(stretch)到一个奇怪的比例(300x150;仍然不是我试图在CSS中建立的),并将其保留在那...

我做错了什么?

最佳答案

标准 Canvas 尺寸为 150x100,CSS 会将其拉伸(stretch)至所需尺寸,但其上仍具有 150x100 个绘图点,因此您必须内联设置其尺寸

<canvas width="297" height="200"></canvas>

或使用 JavaScript:

document.getElementById('card-texture-canvas').width = 297
document.getElementById('card-texture-canvas').height = 200

关于javascript - Canvas只保存部分图像并将其奇怪地拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33448538/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com