javascript - 複数のキャンバスをhtml5のdataURLに変換します

Question

複数のキャンバスを結合して1つの画像を作成したい。toDataURLそれで、単一の画像を作成するために複数のキャンバスを隠す方法はありますか？

Answer 1

複数の引数（canvas要素）を取り、それらを1つの空白のキャンバスに配置してから、新しく作成されたキャンバスのdataurlを返す関数を作成します。

var getImadeData = function () {
    var i = arguments.length,
        tempCanvas = document.createElement("canvas"),
        ctx = tempCanvas.getContext("2d");
     while (i--) {
        ctx.drawImage(arguments[i], 0, 0);
    };
    return tempCanvas.toDataURL();
};

このように、1つのdataurlに入れたい複数のキャンバス要素を関数にフィードするだけです。

var newData = getImageData(canvas1, canvas2, canvas3);

この例では、最後のキャンバスが最初に空白のキャンバスに配置されるため、キャンバス要素を適切に並べ替えてください。

Answer 2

はい、drawImagecanvas 2dレンダリングコンテキストのメソッドは、canvas要素を画像要素として受け入れます。だからあなたがしなければならないのは：

• 新しいキャンバスを作成する
• そのコンテキストを取得する
• 他のすべてのキャンバスをそれに描画しますdrawImage
• この新しいキャンバスから最終的な画像を抽出します

Answer 3

この例を試してみてください。

                //html block


                <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">


                </canvas>
                <canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
                Your browser does not support the canvas element.
                </canvas>

                <canvas id="Canvasimage" width="500" height="100" style="border:1px solid #c3c3c3;">
                Your browser does not support the canvas element.
                </canvas>
    <img id="finalimage" width="500" height="100"  style="border:1px solid #c3c3c3;"/>

                //script block
                function loadImages(sources, callback) {
                    var images = {};
                    var loadedImages = 0;
                    var numImages = 0;
                    // get num of sources
                    for (var src in sources) {
                        numImages++;
                    }
                    for (var src in sources) {
                        images[src] = new Image();
                        images[src].onload = function () {
                            if (++loadedImages >= numImages) {
                                callback(images);
                            }
                        };
                        images[src].src = sources[src];
                    }
                }

                window.onload = function (images) {

            //Canvas first  here
                    var c = document.getElementById("myCanvas");
                    var ctx = c.getContext("2d");
                    ctx.fillStyle = "#FF0000";
                    ctx.fillRect(0, 0, 200, 100);
                 //Canvas second here
                    var c1 = document.getElementById("myCanvas1");
                    var ctx1 = c1.getContext("2d");
                    ctx1.fillStyle = "#00FF00";
                    ctx1.fillRect(0, 0, 200, 100);


               //Canvas final here.
                    var canvas = document.getElementById("Canvasimage");
                    var context = canvas.getContext("2d");

                    var sources = {
                        darthVader: c.toDataURL("image/png"),
                        yoda: c1.toDataURL("image/png")
                    };

                    loadImages(sources, function (images) {
                        context.drawImage(images.darthVader, 100, 30, 200, 137);
                        context.drawImage(images.yoda, 350, 55, 93, 104);
//finalimage  here which has two canvas data
                var finalimage = document.getElementById("finalimage");
        finalimage.src = canvas.toDataURL("image/png"); 
                    });
                };