以打印尺寸 (300 DPI) 从画布导出图像

Question

我正在尝试制作一个画布应用程序并且我获得了成功。我只是停留在画布输出的打印图像中。图像尺寸太小，无法打印。

以下是申请流程：

1. 上传图片并绘制到画布上。
2. 在分割画布上进行缩放、移动和旋转等操作。
3. 我已经成功地从这些分割中生成了单个图像
4. 我已将 base64 从画布导出到打印过程。

当我从画布导出数据时，问题就在这里，它是小图像，即使我做了一些 Imagick 的事情来调整最终图像的图像质量，也无法在海报上打印。

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

如果您有较小的画布元素进行编辑，则必须将这些较小的画布元素中的数据重新组合成一个完整大小的画布元素，然后从该元素输出数据。

为简单起见，假设您已将图像切成四个象限并绘制到四个画布元素 canvas[0] - canvas[3] 以进行编辑。然后，您需要将它们重新组合成一个更大的画布，执行如下操作...

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();