javascript - 以打印尺寸 (300 DPI) 从 Canvas 导出图像

Question

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

申请流程如下:

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

当我从 Canvas 导出数据时，问题就出在这里，它是一个小图像，即使我做了一些 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 元素较小，则必须将这些较小 Canvas 元素中的数据重新组合到一个完整大小的 Canvas 元素中，并从该元素输出数据。

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

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