画布仅保存部分图像并将其奇怪地拉伸[重复]

Posted

技术标签:

【中文标题】画布仅保存部分图像并将其奇怪地拉伸[重复]【英文标题】:Canvas only saves part of image and stretches it out weirdly [duplicate] 【发布时间】:2016-01-31 14:52:32 【问题描述】:

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

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;

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

我做错了什么?

【问题讨论】:

【参考方案1】:

标准画布尺寸为 150x100,CSS 会将其拉伸至所需尺寸,但其上仍有 150x100 的绘图点,因此您必须将其尺寸设置为内联

<canvas  ></canvas>

或使用javascript

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

【讨论】:

很奇怪。这是以前从未有过的。他们一定是出于某种原因改变了它。谢谢!

以上是关于画布仅保存部分图像并将其奇怪地拉伸[重复]的主要内容,如果未能解决你的问题,请参考以下文章

将画布导出为 .gif 图像 [重复]

Javascript - 旋转画布导致拉伸[重复]

使图像圆形和特定尺寸而不拉伸,掩盖其余部分[重复]

如何将base64图像转换为图像并将其保存到文件系统[重复]

当我尝试捕获图像(内置相机)并将其保存到文件时出现 NullPointerException [重复]

LWUIT - 如何让 9 部分图像拉伸而不重复(资源编辑器 1.5)