Получите 2 полотна ткани в одно изображение

Question

var canvas = new fabric.Canvas('imageCanvas',{backgroundColor: 'rgb(105,105,105)'}); 
var textCanvas = new fabric.Canvas('textCanvas'); 

function CanvasData() 
{ 
    var dataUrl = canvas.toDataURL(); 
    var elem = document.getElementById("canvasData"); 
    // elem.value = dataUrl; 
    // window.open(dataUrl, "toDataURL() image", "width=600, height=200"); 
    var canvasone = canvas; 
    var ctx1 = canvasone.getContext("2d"); 
    var canvastwo = textCanvas; 
    var ctx2 = canvastwo.getContext("2d"); 
    ctx1.drawImage(ctx2, 0, 0); 
    var dataUrl = canvasone.toDataURL(); 
    elem.value = dataUrl; 
} 

Как получить 2 полотна ткани и положить toDataURL() и вывести изображение комбинирования с этими двумя холстами? Я пытался использовать ничью, но я не могу ее получить.

Answer 1

Следующий код не тестировался, и, возможно, потребуется перенастройка ...

Учитывая, что у вас есть 2 холсты, контролируемых FabricJS:

var canvas = new fabric.Canvas('imageCanvas'); 
var textCanvas = new fabric.Canvas('textCanvas'); 

Получить ссылку на эти оригинальные холсты, как это:

var myImageCanvas=document.getElementById('imageCanvas'); 
var myTextCanvas=document.getElementById('textCanvas'); 

Создайте новый третий холст, чтобы держать объединенные холсты. (Или, если вы не заботитесь о перезаписке imageCanvas, вы можете использовать сам imageCanvas).

var output=document.createElement('canvas'); 
var octx=output.getContext('2d'); 

тиражная imageCanvas & textCanvas на новый холст.

Обратите внимание: использовать элемент холста в качестве источника изображения. Код в вашем вопросе пытается использовать контекст как источник изображения - это не сработает.

octx.drawImage(myImageCanvas,0,0); 
octx.drawImage(myTextCanvas,0,0); 

Наконец, создать изображение из нового холста с помощью .toDataURL

var img=new Image(); 
img.onload=function(){ 
    document.body.appendChild(img); 
} 
img.src=output.toDataURL();