Best Way To Convert A Div To Image? Using Either Php, Javascript Or Jquery

I have a div containing images like so:

here.

What you do is read the images and their css position, top and left. Then copy it into the canvas.

(code from head, may be error)

// Loop over images and call the method for each image node
$('#Created_Design').children(function() {
    drawImage(this.src, this.style.left, this.style.top);
});

function drawImage(src, x, y) {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, x, y);
  };
  img.src = src;
}

Solution 2:

You can draw images from the div on the canvas using method drawImage(), after that you can get resulting base64-encoded image using toDataURL() method.

Solution 3:

I would use php's GD library to create the new image. You can use the div's inline style to figure out the positioning needed for the new image. You'll need to spend some time reading the GD documentation I linked to first, it can be a bit confusing if you haven't used GD before but it can provide a lot of flexibility when working with images in php.

Share