javascript – How to implement downloading multiple superimposed images of one

Question:

Good afternoon, I have this question: there are 2 containers, in one I can upload a picture (via AJAX), and in the second (it is on top of it) I upload ready-made images (Hats, glasses and stuff like that), the trouble is that they are not one element, how can I implement downloading all these elements with one picture

Thanks for the answers)

Answer:

This works through the canvas element. The element canvas1 is created, create a second canvas, insert pictures into them, insert canvas2 into canvas1 get a picture in base64:

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var canvas2=document.getElementById("canvas2");
var ctx2=canvas.getContext("2d");
var cw2=canvas.width;
var ch2=canvas.height;


var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/77231305/454817.jpg";

img2 = new Image();
img2.crossOrigin = 'anonymous';
img2.src = "https://dl.dropboxusercontent.com/u/77231305/images.jpg";
img2.onload = start2;

function start(){
  canvas.width=img.width;
  canvas.height=img.height;
  ctx.drawImage(img,0,0);
}

function start2(){
  canvas2.width=img2.width;
  canvas2.height=img2.height;
  ctx2.drawImage(img2,0,0);
  var dataURL= watermarkedDataURL(canvas,canvas2);
}

function watermarkedDataURL(canvas,canvas2){
  var tempCanvas=document.createElement('canvas');
  var tempCtx=tempCanvas.getContext('2d');
  var cw,ch;
  cw=tempCanvas.width=canvas.width;
  ch=tempCanvas.height=canvas.height;
  tempCtx.drawImage(canvas,0,0);
  tempCtx.drawImage(canvas2,150,150);
  // just testing by adding tempCanvas to document
  document.body.appendChild(tempCanvas);
  return(tempCanvas.toDataURL());
  }
body{ background-color: #e1e1e1; padding:20px;}
canvas{border:1px solid red;}
<canvas id="canvas1" width=300 height=300></canvas>
<canvas id="canvas2" width=50 height=50></canvas>
Post Views: 0
Scroll to Top