将 2 个织物画布放入一张图像中答案

【问题标题】：Get 2 fabric canvas into one image将 2 个织物画布放入一张图像中
【发布时间】：2023-03-21 13:31:01
【问题描述】：

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() 并输出与这 2 个画布的组合图像？我尝试使用draw，但我无法获得它。

【问题讨论】：

标签： canvas todataurl

【解决方案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();

【讨论】：