從一個HTML5畫布抓取並繪制到另一個

Question

我正在嘗試從一個畫布元素獲取像素信息，對其進行處理，然后將其繪制到另一個畫布元素。 當我在同一張畫布上繪畫時，我已經能夠完成這項工作。 它也可以按特定順序工作，但不是我需要的順序。

這個想法是讓隱藏的畫布保存圖像信息，我可以從中提取像素，進行操作，然后繪制到主畫布。 當我從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>

我的目標是在混合時將一種化學溢出物消退為另一種化學溢出物。 現在它們非常堅固，在這里玩耍時您會看到一些東西。

感謝您提供的任何幫助，以解決這種令人困擾的煩惱。

http://timsterrible.net/gaming/pixelsweeper/stack/notmixing.png

Answer 1

希望以下內容可以為您解決問題提供幫助。 將函數getPixel作為一種方法添加到畫布，該畫布用於包含從中提取數據的所需圖像。 作為一種方法，將功能putPixel添加到用於包含最終組合圖像的畫布。

我對功能進行了快速測試，以查看兩個圖像summer.jpg和winter.jpg的中央部分是否正確組合。

以下代碼的局限性在於，畫布和圖像的寬度和高度均應相同，但可以輕松更改。

<!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>

從一個HTML5畫布抓取並繪制到另一個

問題描述

1 個解決方案

解決方案1
0 已采納 2013-02-04 17:14:57

從一個HTML5畫布抓取並繪制到另一個

問題描述

1 個解決方案

解決方案1 0 已采納 2013-02-04 17:14:57

解決方案1
0 已采納 2013-02-04 17:14:57