Javascript 从一个HTML5画布抓取并绘制到另一个画布_Javascript_Image Processing_Html5 Canvas

Javascript 从一个HTML5画布抓取并绘制到另一个画布

javascript image-processing html5-canvas

Javascript 从一个HTML5画布抓取并绘制到另一个画布,javascript,image-processing,html5-canvas,Javascript,Image Processing,Html5 Canvas,我试图从一个画布元素获取像素信息，对其进行操作，然后将其绘制到另一个画布元素。当我在同一张画布上画画时，我已经能够完成这项工作。它也以特定的顺序工作，但不是我需要的顺序这个想法是让隐藏的画布保存图像信息，我可以从中提取像素，进行操作，然后绘制到主画布。当我从myCanvas绘制到myCanvas2时，这是可行的，但反过来不行。我从中获取数据的图像不需要是画布，事实上，如果不是因为我希望使用尽可能少的资源，我会更喜欢它 <!DOCTYPE html> <html> <

我试图从一个画布元素获取像素信息，对其进行操作，然后将其绘制到另一个画布元素。当我在同一张画布上画画时，我已经能够完成这项工作。它也以特定的顺序工作，但不是我需要的顺序

这个想法是让隐藏的画布保存图像信息，我可以从中提取像素，进行操作，然后绘制到主画布。当我从myCanvas绘制到myCanvas2时，这是可行的，但反过来不行。我从中获取数据的图像不需要是画布，事实上，如果不是因为我希望使用尽可能少的资源，我会更喜欢它

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<canvas id="myCanvas2" width="800" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var image = new Image();
image.src = 'http://timsterrible.net/gaming/pixelsweeper/images/bariumStrip.png';

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

var canRaw = document.getElementById("myCanvas2");
var canvas = canRaw.getContext("2d");

image.onload = canvas.drawImage(image, 0, 0);

function copy()
{
var imgData=ctx.getImageData(32,0,32,32);
canvas.putImageData(imgData,10,70);
}
</script>

<button onclick="copy()">Copy</button>

</body>
</html>


您的浏览器不支持HTML5画布标记。
您的浏览器不支持HTML5画布标记。
var image=新图像（）；
image.src=http://timsterrible.net/gaming/pixelsweeper/images/bariumStrip.png';
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（10,10,50,50）；
var canRaw=document.getElementById（“myCanvas2”）；
var canvas=canRaw.getContext（“2d”）；
image.onload=canvas.drawImage（image，0，0）；
函数副本（）
{
var imgData=ctx.getImageData（32,0,32,32）；
canvas.putImageData（imgData，10,70）；
}
复制

我的目标是当它们混合时，将一种化学品溢出物淡化为另一种。现在它们非常坚固，你可以看到当你

谢谢你对这个令人困惑的烦恼所能提供的任何帮助

希望以下内容能为您解决问题提供一些帮助。将函数getPixel作为方法添加到画布，该画布用于包含从中提取数据所需的图像。将函数putPixel作为一种方法添加到用于包含最终组合图像的画布中

我添加了一个功能的快速测试，以查看两个图像的中心部分是否正确组合

下面代码的局限性在于画布和图像都具有相同的宽度和高度，但很容易更改

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>pixel swap</title>
<style type="text/css">
    div, canvas, img {
        position: absolute;
    }

    img {
        top:0px;
        left:0px;
        visibility:hidden;
    }

    #imagedata {
        left:10px;
        top:10px;
        visibility:hidden;
    }
    #maincanvas {
        left:10px;
        top:10px;
        border:1px solid black;
    }

</style>
<script type="text/javascript">
    // abbreviation function for getElementById
    function $(id) {
      return document.getElementById(id);
    }

    //height and width for all canvases and images
    var W=100;
    var H=100;

    //variables for canvases
    var cid, cmain;


    /*getPixel gets an individual pixel from the image, img
     */
    function getPixel(x,y,img) {
        this.ctx.drawImage(img,0,0);
        var imdata=this.ctx.getImageData(0,0,this.width,this.height);
        var col=4*(y*this.width+x);
        var pix=new Pixel();
        pix.red=imdata.data[col++];
        pix.green=imdata.data[col++];
        pix.blue=imdata.data[col++];
        pix.alpha=imdata.data[col];
        return pix;
    }

    //Pixel Object
    function Pixel() {
        this.red;
        this.green;
        this.blue;
        this.alpha;
    }

    function putPixel(x,y,pixel){
        var imdata=this.ctx.getImageData(0,0,this.width,this.height);
        var col=4*(y*this.width+x);
        imdata.data[col++]=pixel.red;
        imdata.data[col++]=pixel.green;
        imdata.data[col++]=pixel.blue;
        imdata.data[col]=pixel.alpha;
        this.ctx.putImageData(imdata,0,0);
    }


    function main() {
        //set cid so that pixels are readable
        cid=$("imagedata");
        cid.width=W;
        cid.height=H;
        cid.ctx=cid.getContext('2d');
        cid.getPixel=getPixel;

        //set cmain so that pixels are settable to main canvas
        cmain=$("maincanvas");
        cmain.width=W;
        cmain.height=H;
        cmain.ctx=cmain.getContext('2d');
        cmain.putPixel=putPixel;

        var img; //image read from
        var pixel;//pixel data

        //testing getPixel and putPixel
        //should be alternating columns in the centre of the combined image in cmain canvas
        for(var x=30;x<70;x++) {
            for(var y=30;y<70;y++) {
                if(x%2==0) {
                    img=$("s")
                }
                else
                {
                    img=$("w")
                }
                pixel=cid.getPixel(x,y,img);
                cmain.putPixel(x,y,pixel);
            }
        }
    }
</script>
</head>
<body onload="main()">
    <!-- list of hidden images for reading data-->
    <img id="s" src="images/summer.jpg">
    <img id="w" src="images/winter.jpg">
    <!-- end of list of images  -->

    <canvas id="imagedata"></canvas>
    <canvas id="maincanvas"></canvas>   
</body>
</html>


像素交换
分区，画布，图像{
位置：绝对位置；
}
img{
顶部：0px；
左：0px；
可见性：隐藏；
}
#图像数据{
左：10px；
顶部：10px；
可见性：隐藏；
}
#主画布{
左：10px；
顶部：10px；
边框：1px纯黑；
}
//getElementById的缩写函数
函数$（id）{
返回文档.getElementById（id）；
}
//所有画布和图像的高度和宽度
var W=100；
var H=100；
//画布的变量
var-cid，cmain；
/*getPixel从图像中获取单个像素，img
*/
函数getPixel（x、y、img）{
这个.ctx.drawImage（img，0,0）；
var imdata=this.ctx.getImageData（0,0，this.width，this.height）；
var col=4*（y*此宽度+x）；
var pix=新像素（）；
pix.red=imdata.data[col++]；
绿色=imdata.data[col++]；
pix.blue=imdata.data[col++]；
pix.alpha=imdata.data[col]；
返回pix；
}
//像素对象
功能像素（）{
这个是红色的；
这是绿色；
这是蓝色的；
这是alpha；
}
功能像素（x、y、像素）{
var imdata=this.ctx.getImageData（0,0，this.width，this.height）；
var col=4*（y*此宽度+x）；
imdata.data[col++]=pixel.red；
imdata.data[col++]=pixel.green；
imdata.data[col++]=pixel.blue；
imdata.data[col]=pixel.alpha；
这个.ctx.putImageData（imdata，0,0）；
}
函数main（）{
//设置cid以使像素可读
cid=$（“图像数据”）；
宽度=W；
cid.高度=H；
cid.ctx=cid.getContext（'2d'）；
cid.getPixel=getPixel；
//设置cmain，以便将像素设置为主画布
cmain=$（“主画布”）；
Cmin.宽度=W；
Cmin.高度=H；
cmain.ctx=cmain.getContext（'2d'）；
cmain.putPixel=putPixel；
var img；//从中读取图像
var pixel；//像素数据
//测试getPixel和putPixel
//应在画布中组合图像的中心交替列
对于（变量x=30；x
那么，你的问题到底是什么？你是在寻找还是globalAlpha
？globalAlpha和globalCompositeOperation都是非常有用的工具。但是，我必须手动操作图像数据，因为这两个工具都不能从一个图像渐变到另一个图像。幸运的是，这不是问题。我遇到的问题，最终问题是我s、 为什么我可以从一个画布收集图像数据，而不能从另一个画布收集图像数据？请检查此答案可能b它很有用[stackoverflow][1][1]：恐怕您的代码有问题。我尝试了几种变体，使用了控制台日志等。结论是我的计算机绝对不喜欢getImageData函数。我将尝试一些解决方法，包括将要处理的图像保存为32位位图，并将其数值保存到文本文档中。我希望en在脚本开始时逐像素创建图像数据，并将数据存储在一个随时可用的数组中。显然有。如果图像如前所述，上述代码在我的本地计算机上似乎可以正常工作。如果我将src替换为指向其在web上的url引用的链接，它将不再工作。您下载了图像或链接吗对他们来说，是吗？我看到他们是下载的，所以我决定还是用MS Paint快速制作我自己的涂鸦，然后在本地运行代码。我在我妻子的笔记本电脑上运行了同样的代码，效果很好。这告诉我，和其他任何东西一样，不是所有的计算机都能做所有的事情。我将图像转换为位图，并提取像素数据以进行编辑从文本文件中读取。效果很好。我再次尝试运行该程序，现在它工作了！结果我错过了硬盘上保存的安全标记文件的全部内容。当我在我妻子的计算机上测试时，该文件处于联机状态，这就是它工作的原因。使用隐藏画布保存