个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
您好，我已经实现了一个函数，在其中传递带有透明部分的 png 图像 (rgba) 的 imageData 数组。我用下面的代码压平图像，但我有一个关于 alpha 的问题，我需要一些帮助。正如您在下面的屏幕截图中看到的那样，红色文本具有半透明的黑色阴影，但它呈现白色而不是半透明。
var mergeImageData = function ( imageDataArray ) {
var canvas = document.getElementById( 'canvas' );
canvas.width = 512;
canvas.height = 512;
var ctx = canvas.getContext( '2d' );
var newImageData = imageDataArray[ 0 ];
for ( var j = 1, len = imageDataArray.length; j < len; j++ ) { // iterate through the imageDataArray
console.log( imageDataArray[ j ].data.length );
for ( var i = 0, bytes = imageDataArray[ j ].data.length; i < bytes; i += 4 ) { // iterate through image bytes
var index = ( imageDataArray[ j ].data[ i + 3 ] === 0 ? 0 : j );
newImageData.data[ i ] = imageDataArray[ index ].data[ i ];
newImageData.data[ i + 1 ] = imageDataArray[ index ].data[ i + 1 ];
newImageData.data[ i + 2 ] = imageDataArray[ index ].data[ i + 2 ];
newImageData.data[ i + 3 ] = imageDataArray[ index ].data[ i + 3 ];
}
}
ctx.putImageData( newImageData, 0, 0 );
console.log( "all done" );
};
重要将来这将在 webworker 中完成，这就是我对这种方法感兴趣的原因，因为 webworker 没有 Canvas 访问权限。
最佳答案
您的第一个问题与 putImageData() 函数有关:根据 this answer通过 @ellisbben ,
the putImageData method does not pay any attention to compositing; it merely copies pixel values. In order to get compositing, we need to use drawing operations.
因此，您必须使用内存中的第二个 Canvas (如 this answer 的 @markE 中所述)。
然后，你的第二个问题是你想在网络 worker 中完成它。
你是对的，网络 worker 似乎无法处理此类绘图操作:根据 this answer通过 @AshleysBrain
Web workers can only calculate, not modify the DOM or make any calls to draw to a canvas.
因此，您唯一的方法是通过工作人员处理数据来拆分操作，然后将其绘制到主线程中。
下面是一个示例，假设您的根文件夹中有 2 个 png 文件，分别名为 test0.png 和 test1.png。
index.html
<html>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="main.js"></script>
</html>
main.js
if (!!window.Worker) {
var myWorker = new Worker("worker.js");
myWorker.onmessage = function(e) {
var tmp=document.createElement("canvas");
tmp.width=512;
tmp.height=512;
var ctx2=tmp.getContext("2d");
ctx2.putImageData(e.data[0],0,0);
var canvas = document.getElementById( 'canvas' );
canvas.width = 512;
canvas.height = 512;
var ctx = canvas.getContext( '2d' );
ctx.fillStyle = "rgb(0,255, 0)";
ctx.fillRect(0,0,250,50);
ctx.drawImage(tmp,0,0);
}
}
var images = [];
function getImagesData(){
for(i=0; i<2; i++){
var img = new Image();
img.src = "test"+i+".png";
//Should add an onload method
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
images[i] = ctx.getImageData(0,0,img.width,img.height);
}
myWorker.postMessage(images);
}
getImagesData();
Worker.js
var mergeImageData = function( imageDataArray ) {
var newImageData = imageDataArray[ 0 ];
for ( var j = 0; j < imageDataArray.length; j++ ) { // iterate through the imageDataArray
for ( var i = 0, bytes = imageDataArray[ j ].data.length; i < bytes; i += 4 ) { // iterate through image bytes
var index = ( imageDataArray[ j ].data[ i + 3 ] === 0 ? 0 : j );
newImageData.data[ i ] = imageDataArray[ index ].data[ i ];
newImageData.data[ i + 1 ] = imageDataArray[ index ].data[ i + 1 ];
newImageData.data[ i + 2 ] = imageDataArray[ index ].data[ i + 2 ];
newImageData.data[ i + 3 ] = imageDataArray[ index ].data[ i + 3 ];
}
}
return newImageData;
};
onmessage = function(e) {
var res = mergeImageData(e.data);
postMessage([res]);
}
原始 png 文件
结果
关于javascript - Canvas 图像展平 - 组合 imageData，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28108581/
25
4
0
我正在尝试将两个 ImageData 对象混合成一个对象，以获得类似于此 link 中显示的图片的结果。 以下是具有两个 ImageData 的 Javascript 代码 var redImage
我在 CNContact 中设置了 imageData 并保存，但是当我调用我保存 headImage 的人时，它不起作用。 CNMutableContact *contact = [[CNMutab
这个问题是为了更深入地理解我之前关于大尺寸Canvas动画的问题。问题在这里:Repeat HTML canvas element (box) to fill whole viewport 我试图理解
该程序的想法是获取 map 图像并在该 map 上覆盖黑色 Canvas 。然后用户将点击 Canvas 的某个部分，类似于喷漆工具，鼠标附近的像素将在 Canvas 上变得透明。因此，将显示 map
我有标准 System.Drawing.Bitmap我需要将其转换为 FFMediaToolkit.Graphics.ImageData .我怎样才能做到这一点？ 我试过了: ImageData.Fr
因此，有很多关于如何从 ImageData 对象的 Uint32Array View 写入整个像素的示例。但是是否可以在不将计数器增加 4 次的情况下读取整个像素？从 hacks.mozilla.or
我尝试在重新获取后获取 imageData CNContact使用 unifiedContactWithIdentifier:keysToFetch:error:和 CNContactImageDat
如何在 JavaScript 中深度克隆一个不是标准类型对象(例如 ImageData)的对象？它包含另一个 UInt64Array 类型的对象，我也不希望引用单独的对象，而是完全复制它。 有关深度复
如何将 ImageData 对象中包含的图像旋转 45 度？ https://developer.mozilla.org/en/docs/Web/API/ImageData 我不想用 Canvas 来
我有一个 600 x 400 像素的 Canvas ，它返回数据长度为 960,000 (600*400*4) 的 ImageData。有没有办法将宽度和高度缩小10倍，我想得到一个数据长度为9600
我想制作一个使用此方法的分形生成器:https://www.johndcook.com/blog/2017/07/08/the-chaos-game-and-the-sierpinski-triang
这个问题已经有答案了: CanvasContext2D drawImage() issue [onload and CORS] (1 个回答) 已关闭 3 年前。 我正在尝试使用 canvas 从图像
例如我有一张图片“img/我的图像.jpg”我想将其转换为 Uint8ClampedArray 格式(如图所示)。 为了什么？我正在使用一个库，经过漫长的过程将图像转换为这种格式，但我还有其他图像需要
我目前正在遍历 canvas 元素的 imageData 像素数组。我想遍历第一行(顶部)和最后一行(底部)像素。我该怎么做？ 这就是我循环遍历整个像素阵列的方式: //Var dec
我有一些具有白色背景的 html 图像。我需要删除白色背景。我在想我可以让所有的白色像素透明，但我不知道该怎么做。我只想使用 html/javascript。 最佳答案 这是怎么做的.. functi
ImageBitmap 和有什么区别和 ImageData在 JavaScript 中？你什么时候想要一个或另一个？ 最佳答案 ImageBitmap 持有对位图数据的引用，可以将其传递到 GPU 并
我需要用户能够绘制一个 Canvas 元素，然后需要将其转换为长度为 784 的数组，以便可以将其输入算法中。该数组应该具有像素阴影强度，我可以使用 ctx.getImageData() 方法找到它。
您好，我已经实现了一个函数，在其中传递带有透明部分的 png 图像 (rgba) 的 imageData 数组。我用下面的代码压平图像，但我有一个关于 alpha 的问题，我需要一些帮助。正如您在下面
代码: // Create a new canvas var canvas = document.createElement('canvas'); canvas.width = canvas.heig
我是计算机图形学专业的大学硕士生，我在使用 three.js 访问使用 EffectComposer 创建的纹理的图像数据(像素)时遇到困难。 第一个 composer (composer) 使用线检
我是一名优秀的程序员,十分优秀！