- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在处理 Angular 项目,我必须将图像放在 Canvas 上。图片不是本地存储的,我只有图片数据所以我用这个。
this.context.putImageData(imgData, firstPointX, firstPointY);
现在我的问题是我收到的图片是 640 * 480。我想知道是否有办法更改图像尺寸以便显示大于 640 * 480?
最佳答案
putImageData() 将始终使用自己的 width
和 height
作为 destinationWidth 和 destinationHeight 我们可以在 drawImage() 中使用。
对上下文矩阵变换不敏感,因此缩放它不会对这种方法产生影响。
虽然它有一个 dirtyWidth 和 dirtyHeight 参数,但它们对我们没有多大帮助,但它们可以减少将要绘制的表面积,它们不会修改包含的像素,并且无论如何都无法使该表面增长... (您可以查看 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/
我无法在 mdn(我知道这不是官方引用)或其他任何地方找到它;所以,我想我会问这个简单的问题: 例如,我有以下片段: var can = document.getElementById("can");
我正在制作动画,使用 Canvas 根据百分比用颜色填充矩形。我能够做到这一点,但内部广场必须有 border-bottom 和 border-right。我正在使用 ctx.strokeStyle
我处于一个长期运行的可取消函数中,该函数具有一个永久循环。 我需要检查上下文是否关闭。 go func(){ for { if ctx.Err() != nil { retu
在netty Java文档中说所以一旦你想要请求刷新就一定要调用flush(),但是在这个例子中它说没有需要调用ctx.flush()。但我没有发现 flush(ChannelHandlerConte
Netty 的管道(即 ctx.foo() 与 ctx.channel.foo())之前已在 StackOverflow 上解释过两次: Any difference between ctx.writ
我注意到 ctx 与处理程序不同,例如,即使这些处理程序位于同一管道中也是如此 p.addLast("myHandler1", new MyHandler1()); p.addLast
有什么区别吗?是 ctx.close只是 ctx.channel.close 的较短版本? 最佳答案 假设我们在管道中有三个处理程序,它们都拦截 close()操作,并调用 ctx.close()在里
我正在尝试使用 koa-body 解析简单表单中的数据,但在后请求处理中我只能访问 ctx.request.body ,但不能访问 ctx.request.files 。我尝试了几个选项来解决这个问题
其中ctx我应该在 run 中使用吗? hystrix.Do的参数hystrix-go的功能包裹? ctx从上层,还是 context.Background()? 谢谢。 package main i
我目前正在编写对 Shopify 应用进行身份验证的手动设置,类似于 NodeJS and Express 中的设置方式。 。对于该应用程序,我使用 NodeJS 和 Koa框架。我也在使用@koa/
我已经看到它已经在不同的库中作为缩写使用了两次,但我无法理解它的含义。 例如这里: static int reformat_string(void * ctx, const unsigned char
【现象】 2022-01-17 18:32:26,958 ERROR 18500 [-/::1/-/1ms GET /findOne/1] nodejs.ReferenceError: ctx is
我正在使用 nestjs 并且我试图创建一个自定义装饰器: import { createParamDecorator, ExecutionContext } from '@nestjs/common
出于某种原因,当客户端连接到服务器时,ctx.fillText 不想绘制任何内容。控制台正在正确记录所有内容,因此该功能可以正常工作,但 Canvas 有点愚蠢。 这是服务器端代码的一部分: io.s
我正在尝试在带有koa和postgresql的节点中创建post RestApi。我有一个唯一的电子邮件验证,并且想检查电子邮件是否存在,它应该显示该邮件已经存在的消息用户。我的查询正在工作,但是ct
curl -XPOST 'localhost:9200/customer/external/1/_update?pretty' -d ' { "script" : "ctx._source.age
我正在尝试加载图像然后将其绘制到 Canvas 上,但目前我只能渲染一半图像: var image = new Image(); image.crossOrigin = 'Anonymous'; im
我正在尝试将音频分析器节点连接到我的啸叫器设置。 问题是我得到一个由“128”填充的数组,这意味着没有声音,但声音正在播放。 这是我的代码: var Sound = new Howl({
我使用下面的代码在 Canvas 中绘制了图像,其中我将元素图像与折叠的杯子图像组合在一起 canvas2(getFullElementImage); function canvas2(getFull
这是 JS http://jsfiddle.net/T2zsM/我只能在单击增量时更改 ctx.fillRect 的值,但它不适用于减量。 var Canvas = document.getEleme
我是一名优秀的程序员,十分优秀!