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＆amp; textCanvas到新画布上。

请注意，您使用canvas元素作为图像源。您的问题中的代码尝试使用上下文作为图像源 - 这将无效。

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();

将2个布料画布放入一个图像中

1 个答案: