在 fabric js 中下载不捕获另一个 canvas 后面的 canvas

Question

在 Fabric js 中，我们可以下载特定的 canvas 及其对象。但是，如果我有一个 canvas 在另一个 canvas 之上，那么它将不会捕获，因为我使用样式 position: absolute; 将它放在另一个 canvas 之上（ css) 所以所有 canvas 都没有下载。有没有其他方法可以做到这一点。

我的html编码是

<div class="main_canvas">
    <canvas id="canvas_img" data-image="google-nexus-5x.png"></canvas>
    <div class="collage_wr">
    </div>
</div>
<a href="javascript:void(0);" class="save-image" id="save">Save</a>

我的js编码是

var main_canvas = new fabric.Canvas('canvas_img'),
    width = $('.main_canvas').width(),
    height = $('.main_canvas').height(), //580
    img = $('#canvas_img').attr('data-image'),
    name = "phone";
    main_canvas.setWidth(width);
    main_canvas.setHeight(height);
    main_canvas.controlsAboveOverlay = true;
    main_canvas.selection = false;
    main_canvas.lockUniScaling = true;
    main_canvas.centeredScaling =  true;
    fabric.Image.fromURL(img, function(oImg) {
        if ( $(window).width() < 800 ) {
            oImg.set({
                width: oImg.getWidth() / 1.4,
                height: oImg.getHeight() / 1.4,
            });
        } else {
            oImg.set({
                width: oImg.getWidth(),
                height: oImg.getHeight(),
            });
        }
    });
    main_canvas.setOverlayImage(img, main_canvas.renderAll.bind(main_canvas),{
        name: name,
        // width: width,
        // height: height,
        originX: 'left',
        originY: 'top'
    });
main_canvas.setBackgroundColor('#fff');
var XML = '<?xml version="1.0" encoding="utf-8"?>';
    XML += '<views>';
        XML += '<view>';
            XML += '<view_type>1</view_type>';
            XML += '<canvas>';
                XML += '<canvas_id>canvas1</canvas_id>';
            XML += '</canvas>';
            XML += '<canvas>';
                XML += '<canvas_id>canvas2</canvas_id>';
            XML += '</canvas>';
            XML += '<canvas>';
                XML += '<canvas_id>canvas3</canvas_id>';
            XML += '</canvas>';
            XML += '<canvas>';
                XML += '<canvas_id>canvas4</canvas_id>';
            XML += '</canvas>';
            XML += '<canvas>';
                XML += '<canvas_id>canvas5</canvas_id>';
            XML += '</canvas>';
            XML += '<canvas>';
                XML += '<canvas_id>canvas6</canvas_id>';
            XML += '</canvas>';
        XML += '</view>';
    XML += '</views>';
XML += '</xml>';

var canvasArray = fabricCanvasArray = ctxArray = [];
var canvas = null;
var activeCanvas = activeObject = canvasStr = '';
var firstView = true;
$(XML).find('view').each(function() {
    var canvasXMLCnt = 0;
    var viewType = $(this).find('view_type').text();
    var divID = 'dynamicDiv_'+viewType;
    createDynamicDiv(divID);

    $(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);
    });
});
function createDynamicDiv(divID) {
    if ($('#'+divID).length == 0) {
        var dynamicDiv = document.createElement('div');
        dynamicDiv.id = divID;
        dynamicDiv.className = 'col-md-12 canvas-div';
        // createAddIcon(divID, dynamicDiv);
        $('.collage_wr').append(dynamicDiv);
        if(firstView != false) {
            $("#"+divID).show();
        } else {
            $("#"+divID).hide();
        }
        firstView = false;
    }
}
if (typeof canvasArray !== 'undefined' && canvasArray.length > 0) {
    for (var i in canvasArray){
    var thisCanvasID = canvasArray[i];
    fabricCanvasArray[i] = new fabric.Canvas(canvasArray[i], {
        isDrawingMode : false,
        width : '90',
        height : '90',
        id : thisCanvasID
    });

    $('#' + thisCanvasID).parent().attr('id', ('div_' + thisCanvasID));
        $('#' + thisCanvasID).parent().addClass('collage_container');
        canvasStr += '#div_' + thisCanvasID;
        if (i < canvasArray.length - 1){
            canvasStr += ',';
        }
    }
    if (typeof fabricCanvasArray !== 'undefined' && fabricCanvasArray.length > 0) {
        canvasDivMouseUp();
    }
}

为了下载我使用了下面的代码

document.getElementById('save').addEventListener('click', function() {
    // var canvas = getCanvas();
    main_canvas.deactivateAll().renderAll();

    downloadJpg(this, main_canvas, 'download.jpeg');    
    function downloadJpg(link,canvasId,filename) {
        var img = main_canvas.toDataURL({
            format: 'jpeg',
            quality: 0.8 
        });
        link.href = img;
        link.download=filename;
    }
},false);

请看上面的代码然后回复我..

Answer 1

您必须将 2 canvas 合并为 1。

第 1 步：从 2 canvases

获取上下文和图像数据

var canvas1Ctx = document.getElementById('canvas1').getContext('2d');
var canvas2Ctx = document.getElementById('canvas2').getContext('2d');
var canvas4Download1 = canvas1Ctx.getImageData(0, 0, 400,300);
var canvas4Download2 = canvas2Ctx.getImageData(0, 0, 400, 300);

第 2 步：将这 2 个 imageData 合并为一个（只是 google 如何合并 2 canvases）

var merged = mergeData(canvas4Download1, canvas4Download2);

function mergeData(topCanvas, bottomCanvas){
    var topCanvasData = topCanvas.data,
        bottomCanvasData = bottomCanvas.data,
        l = topCanvasData.length;
    for(var i = 0; i < l; i += 4){
        //source alpha
        var alphaSource = topCanvasData[i+3] / 255, //source alpha
            alphaDestination = bottomCanvasData[i+3] / 255, //destination alpha
            alphaSourceO = 1 - alphaSource, //(1 - x)
            alpha = alphaSource + alphaDestination * alphaSourceO; //if destination alpha is opaque
        //merge colors
        bottomCanvasData[i] = ((topCanvasData[i]*alphaSource) + (bottomCanvasData[i]*alphaDestination*alphaSourceO)) / alpha,
        bottomCanvasData[i+1] = ((topCanvasData[i+1]*alphaSource) + (bottomCanvasData[i+1]*alphaDestination*alphaSourceO)) / alpha,
        bottomCanvasData[i+2] = ((topCanvasData[i+2]*alphaSource) + (bottomCanvasData[i+2]*alphaDestination*alphaSourceO)) / alpha,
        bottomCanvasData[i+3] = 255*alpha;
    }
    return bottomCanvas;
}

第 3 步：创建新的 canvas 并将合并的数据放在那里（例如 jQuery）

$('<canvas>').attr({
                id: 'mergedCanvas',
                width: 400,
                height: 300
            }).appendTo('body');

            var canvas4download = $('#mergedCanvas').get(0).getContext('2d');
            canvas4download.putImageData(merged, 0, 0);

第 4 步：从合并的 canvas 数据中取出并使用 toDataUrl();

保存

第 5 步：删除合并 canvas

在 fabric js 中下载不捕获另一个 canvas 后面的 canvas

Download not capturing canvas behind another canvas in fabric js

html

jquery

fabricjs