Export image from canvas in printing size (300 DPI)

Question

I am trying to make a canvas application and i get success. I just stuck in print image that is output of canvas. Size of image is too small to print enough.

Following is flow of application:

1. Upload image and draw to the canvas.
2. Do some operations like zoom, move and rotating on split canvas.
3. I have successfully generated single images from those splits
4. And I have export base64 from canvas to printing process.

Problem is here when I export data from canvas it's small image, even if I do some Imagick stuff to resize image quality of final image is not near to print on poster.

JavaScript:

function draw() {
  var Activecanvas = document.getElementsByClassName("cf-photoframe-active");
  var canvas = Activecanvas[0];
  var ctx = canvas.getContext('2d');
  var ActiveCanvasId = canvas.getAttribute("id");
  var img = canvasDetail[ActiveCanvasId].selectedImage;
  var imageX = canvasDetail[ActiveCanvasId].imageX;
  var imageY = canvasDetail[ActiveCanvasId].imageY;
  var resize = resizeDetail[ActiveCanvasId].resize;
  var rotate = rotateDetail[ActiveCanvasId].rotate;
  //if(resize)
  $j("#resize").slider({
    value: resize,
    min: -300,
    max: 300,
    step: 1,
  });
  $j("#rotat").slider({
    value: rotate,
    min: -180,
    max: 180,
    step: 1,
  });
  if (img != '') {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    var im_width = parseInt(img.width + $j("#resize").slider('value'));
    var im_height = parseInt(img.height + $j("#resize").slider('value'));

    var maxWidth = canvas.width; // Max width for the image
    var maxHeight = canvas.height;


    var iswidthMax = 0;
    var imageOrgWidth = img.width;
    var imageOrgHeight = img.height;
    if (maxWidth < maxHeight) {
      iswidthMax = 1;
    } else if (maxWidth == maxHeight) {
      iswidthMax = 2;
    }

    if (iswidthMax == 1) {
      maxWidth = (maxHeight * imageOrgWidth) / imageOrgHeight;

    } else if (iswidthMax == 0) {
      maxHeight = (maxWidth * imageOrgHeight) / imageOrgWidth;
    } else if (iswidthMax == 2) {
      if (img.width > img.height) {
        maxWidth = (maxHeight * imageOrgWidth) / imageOrgHeight;
      } else {
        maxHeight = (maxWidth * imageOrgHeight) / imageOrgWidth;
      }
    }

    var resizeVal = $j("#resize").slider('value');
    var nw = maxWidth + resizeVal;
    var resizeValHeight = maxHeight * resizeVal / maxWidth;
    var nh = maxHeight + resizeValHeight;

    ctx.translate(imageX, imageY);
    ctx.rotate(rotate * Math.PI / 180);
    ctx.translate(-nw / 2, -nh / 2);
    ctx.drawImage(img, 0, 0, nw, nh);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.restore();
  }
}

Answer 1

If you have smaller canvas elements for editing, then you will have to recombine the data from those smaller canvas elements into a canvas element which is the full size and output the data from that element.

For simplicity's sake, let's say that you have cut the image into four quadrants and drawn to four canvas elements canvas[0] - canvas[3] for editing. You would then need to recombine them into one larger canvas doing something like the following...

var imgData = [];
for (var i = 0; i < 4; i++) {
    var tmpCtx = canvas[i].getContext('2d');
    imgData[i] = tmpCtx.getImageData(0, 0, canvas[i].width, canvas[i].height);
}

var fullSizeCanvas = document.createElement('canvas');
fullSizeCanvas.width = img.width * 2;
fullSizeCanvas.height = img.height * 2;

var fullCtx = fullSizeCanvas.getContext('2d');
fullCtx.putImageData(imgData[0], 0, 0);
fullCtx.putImageData(imgData[1], img.width, 0);
fullCtx.putImageData(imgData[2], 0, img.height);
fullCtx.putImageData(imgData[3], img.width, img.height);

var data = fullSizeCanvas.toDataURL();