首页 > 解决方案 > putImageData 无法缩放/适合画布中的视频/图像(HTML5、CSS、JS)

问题描述

我有一张图片,当我放置尺寸时它无法识别新尺寸:

这是我为模拟我正在做的事情而创建的小提琴:https ://jsfiddle.net/lightblue/w7tq3yrc/7/

如您所见,我已经设置了图像和画布的宽度和高度,但它仍然没有将图像“适合”到给定的大小,并且仍然遵循原始图像的宽度和高度。

ctx.putImageData(imgd, 20, 20);

我怎样才能使它适合高度和宽度?

如果你能推荐一个好的图书馆(如果需要的话)我会很乐意听的。

标签: javascripthtmlcsshtml5-canvas

解决方案


您使用的图像是 48/48。为了在画布上获得 20/20 的图像,您需要做ctx.drawImage(image, 0, 0,20,20);

此外,当您获取图像数据时,您不会这样做:ctx.getImageData(0, 0, 45, 45),. 由于您从 20/20 画布获取图像数据,因此您可以ctx.getImageData(0, 0, 20, 20)

我希望它有所帮助。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

// Fill screen with red, green, and blue stripes.
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 20, 20);

ctx.drawImage(image, 0, 0,20,20);

var imgd = ctx.getImageData(0, 0, 20, 20),
    pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
    var r = pix[i],
        g = pix[i + 1],
        b = pix[i + 2],
		    a = pix[i + 3];
    if (r < 60) {
        pix[i + 2] = 20;
    }
}

ctx.putImageData(imgd, 20, 20);
canvas {
   width: 20px;
   height: 20px;
}
#testImage{
   width: 20px;
   height: 20px;
    background-color: green;
}
<h3>Original Image</h3>

<img id="testImage" src='data:;base64,
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' />

<h3>Modified Image</h3>

<canvas id="canvas" width="20" height="20"></canvas>


推荐阅读