Canvas只保存图像的一部分，并奇怪地将其拉伸

Canvas only saves part of image and stretches it out weirdly

本文关键字：保存 图像 一部分 Canvas      更新时间：2023-09-26

我以前成功地使用过画布，但我以前使用的相同代码突然只绘制了图像的一部分。

在这里打闹。

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

但图像的绘制完全忽略了这一点，而是保存了图像的右上角，将其拉伸到一个奇怪的比例（300x150；仍然不是我试图在CSS中建立的比例），然后就这样。。。

我做错了什么？

标准画布大小为150x100，CSS将拉伸到所需大小，但其上仍有150x100个绘图点，因此必须将其大小设置为内联

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

或使用javascript:

document.getElementById('card-texture-canvas').width = 297
document.getElementById('card-texture-canvas').height = 200
相关文章：