Как объединить 3 элемента HTML холста в 1 файл изображения с помощью javascript/jquery?

Question

я 3 холст т.е. canvasTarget, canvasTarget2, canvasTarget3, как показано ниже:

 var canvas = document.getElementById("canvasTarget"); 
     var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
     var canvas2 = document.getElementById("canvasTarget2"); 
     var img2 = canvas2.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
     var canvas3 = document.getElementById("canvasTarget3"); 
     var img3 = canvas3.toDataURL("image/png").replace("image/png", "image/octet-stream"); 

Я хочу, чтобы объединить эти элементы холста в один и загрузить в формате JPEG или PDF файла. Я использую /html2canvas.js для загрузки. Любой немедленный ответ будет оценен.

Answer 1

Итак, вы сделали свои холсты, но не ясно, как вы хотите их комбинировать - накладными, бок о бок? В любом случае вы можете использовать Canvas.context.drawImage(), чтобы добавить их в новый объект canvas, а затем использовать метод Canvas.toDataURL() для возврата, erm, dataURL нового холста.

Нечто подобное возможно ...

/* assumes each canvas has the same dimensions */ 
var overlayCanvases = function(cnv1, cnv2, cnv3) { 
    var newCanvas = document.createElement('canvas'), 
     ctx = newCanvas.getContext('2d'), 
     width = cnv1.width, 
     height = cnv1.height; 

    newCanvas.width = width; 
    newCanvas.height = height; 

    [cnv1, cnv2, cnv3].forEach(function(n) { 
     ctx.beginPath(); 
     ctx.drawImage(n, 0, 0, width, height); 
    }); 

    return newCanvas.toDataURL(); 
}; 

/* assumes each canvas has the same width */ 
var verticalCanvases = function(cnv1, cnv2, cnv3) { 
    var newCanvas = document.createElement('canvas'), 
     ctx = newCanvas.getContext('2d'), 
     width = cnv1.width, 
     height = cnv1.height + cnv2.height + cnv3.height; 

    newCanvas.width = width; 
    newCanvas.height = height; 

    [{ 
     cnv: cnv1, 
     y: 0 
    }, 
    { 
     cnv: cnv2, 
     y: cnv1.height 
    }, 
    { 
     cnv: cnv3, 
     y: cnv1.height + cnv2.height 
    }].forEach(function(n) { 
     ctx.beginPath(); 
     ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height); 
    }); 

    return newCanvas.toDataURL(); 
}; 

/* USAGE */ 
var dURL1 = overlayCanvases(canvas1,canvas2,canvas3); 
var dURL2 = verticalCanvases(canvas1,canvas2,canvas3); 

overlayCanvases() функция будет размещать холсты друг на друга, так что порядок аргументов имеет важное значение. verticalCanvases() выравнивает холст вертикально и в порядке убывания. Важно отметить, что Canvas.context.drawImage() позволяет рисовать один холст в другом - относительное позиционирование можно смешать в соответствии с вашими потребностями.

Функции выше вертел: https://jsfiddle.net/BnPck/cyLrmpjy/