如何使用 Fabric JS 在 canvas 图像中制作照片拼贴？

Question

我正在使用 Fabric JS 来定制产品。在那种情况下，我想在 canvas 中使用 Fabric JS 制作照片拼贴图像上传功能。我对此一无所知。

下面是我真正想要做拼贴的图片。请任何人告诉我如何使用 Fabric JS 或示例代码来做到这一点。

请关注这张图片：

Answer 1

您可以尝试多个 canvas 来创建照片拼贴图像。在每个 canvas 上，任何人都可以添加图像。最终结果将产生为照片拼贴。使用多个canvas如下，

$(XML).find('view').each(function() {
    var canvasXMLCnt = 0;
    var viewType = $(this).find('view_type').text();
    var divID = 'dynamicDiv_'+viewType;
    createDynamicDiv(divID);
    var aLink = '<a href="javascript:void(0);" id="view_'+viewType+'"> View '+viewType+' </a>';
    $("#multipleViewsDiv").append(aLink);
    $(this).find('canvas').each(function() {
        canvasXMLCnt++;
        var canvasID = $(this).find('canvas_id').text();
        var variable_DynamicCanvas = 'canvas_'+viewType+'_'+canvasXMLCnt;
        var dynamicCanvas = document.createElement('canvas');
        dynamicCanvas.id = variable_DynamicCanvas;
        dynamicCanvas.className = 'dynamic-canvases';
        var createdDiv = document.getElementById(divID);
        createdDiv.appendChild(dynamicCanvas);
        canvasArray.push(variable_DynamicCanvas);
    });
});

勾选这个reference

如何使用 Fabric JS 在 canvas 图像中制作照片拼贴？

How to make photo collage in canvas image using Fabric JS?

canvas

fabricjs