конвертировать несколько холстов в dataURL в html5

Question

Я хочу присоединиться к нескольким холстам, чтобы сделать одно изображение. Так есть ли какой-либо метод для скрытия более чем одного холста до toDataURL, чтобы сделать одно изображение?

Answer 1

попробуйте этот пример, надеется, что это поможет увидеть here

   //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"); 
        }); 
       }; 

Answer 2

Да, метод drawImage на холсте 2-го контекста рендеринга принимает элементы холста в качестве элементов изображения. Так что все, что вам нужно сделать, это:

• Создать новый холст
• Получить его контекст
• Нарисуйте все другие холсты к нему с drawImage
• Extract окончательного изображения этого нового холста

Answer 3

создайте функцию, которая принимает несколько аргументов (элементы холста), помещает их на один пустой холст, а затем возвращает 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(); 
}; 

Теперь просто подайте функцию нескольких элементов холста, которые вы хотите поместить в один dataurl, как это.

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

В этом примере, последний холст помещается на пустой холст первый поэтому убедитесь, что заказать элементы холста соответствующим образом.