gpt4 book ai didi

angular - 使用 ctx.putImageData 更改图像大小

转载 作者:行者123 更新时间:2023-12-05 01:17:06 24 4
gpt4 key购买 nike

我正在处理 Angular 项目,我必须将图像放在 Canvas 上。图片不是本地存储的,我只有图片数据所以我用这个。

this.context.putImageData(imgData, firstPointX, firstPointY);

现在我的问题是我收到的图片是 640 * 480。我想知道是否有办法更改图像尺寸以便显示大于 640 * 480?

最佳答案

putImageData() 将始终使用自己的 widthheight 作为 destinationWidthdestinationHeight 我们可以在 drawImage() 中使用。

对上下文矩阵变换不敏感,因此缩放它不会对这种方法产生影响。

虽然它有一个 dirtyWidthdirtyHeight 参数,但它们对我们没有多大帮助,但它们可以减少将要绘制的表面积,它们不会修改包含的像素,并且无论如何都无法使该表面增长... (您可以查看 this Q/A 以获得更深入的 View )


要实现您想要的,您必须实际渲染 ImageData,然后 drawImage 渲染图像。

最全面的方法可能是使用第二个 Canvas :

var ctx = canvas.getContext('2d'),
cW = canvas.width,
cH = canvas.height,
imgW = 20,
imgH = 20;

// generate a 20*20 ImageData full of noise
var data = new Uint8Array(imgW * imgH * 4);
crypto.getRandomValues(data);
var img = new ImageData(new Uint8ClampedArray(data.buffer), imgW, imgH);


// generate a second canvas
var renderer = document.createElement('canvas');
renderer.width = img.width;
renderer.height = img.height;
// render our ImageData on this canvas
renderer.getContext('2d').putImageData(img, 0, 0);
// Now we can scale our image, by drawing our second canvas
ctx.drawImage(renderer, 0,0, cW, cH);
<canvas id="canvas" height="100" width="100"></canvas>

感谢 ImageBitmap对象:

var ctx = canvas.getContext('2d'),
cW = canvas.width,
cH = canvas.height,
imgW = 20,
imgH = 20;

// generate a 20*20 ImageData full of noise
var data = new Uint8Array(imgW * imgH * 4);
crypto.getRandomValues(data);
var img = new ImageData(new Uint8ClampedArray(data.buffer), imgW, imgH);

createImageBitmap(img).then(renderer =>
ctx.drawImage(renderer, 0,0, cW, cH)
)
<canvas id="canvas" height="100" width="100"></canvas>

第三种方法,仅适用于放大 ImageData 并且将避免第二个 Canvas 并在所有实现中可用,是使用与 ImageBitmap 渲染器相同的 Canvas ,并使用合成将此 Canvas 绘制到自身上:

var ctx = canvas.getContext('2d'),
cW = canvas.width,
cH = canvas.height,
imgW = 20,
imgH = 20;

// generate a 20*20 ImageData full of noise
var data = new Uint8Array(imgW * imgH * 4);
crypto.getRandomValues(data);
var img = new ImageData(new Uint8ClampedArray(data.buffer), imgW, imgH);

// we use the main canvas as renderer
ctx.putImageData(img, 0, 0);
// Now we have an unscaled version of our ImageData
// let's make the compositing mode to 'copy' so that our next drawing op erases whatever was there previously
// just like putImageData would have done
ctx.globalCompositeOperation = 'copy';
// now we can draw ourself over ourself.
ctx.drawImage(canvas,
0,0, img.width, img.height, // grab the ImageData part
0,0, canvas.width, canvas.height // scale it
);
<canvas id="canvas" height="100" width="100"></canvas>

关于angular - 使用 ctx.putImageData 更改图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51387989/

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