画布仅保存部分图像并将其奇怪地拉伸[重复]
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
【讨论】:
很奇怪。这是以前从未有过的。他们一定是出于某种原因改变了它。谢谢!以上是关于画布仅保存部分图像并将其奇怪地拉伸[重复]的主要内容,如果未能解决你的问题,请参考以下文章
如何将base64图像转换为图像并将其保存到文件系统[重复]