Question

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

以下是申请流程：

上传图片并绘制到画布上。
在分割画布上执行缩放，移动和旋转等操作。
我已成功生成来自这些拆分的单张图片
我从画布到打印过程都有导出base64。

当我从画布中导出数据这是一个小图像的问题就在这里，即使我做了一些Imagick的东西来调整最终图像的图像质量也不接近在海报上打印。

JavaScript的：

[...]

saveInDB:

    #BE connected to MongoDB client
    MDBClient = MongoClient()
    db = MDBClient ['test']
    collection = db['infosdb']

[...]

meteos = collectionMeteo.find()
for met in meteos:
  logging.info('DEBUG - Update with meteo ' + met['current_observation']['observation_location']['city'])
  result = collection.update_many( {"contract_name" : met['current_observation']['observation_location']['city']},
    {
        "$set": {"temp_c_meteo" : met['current_observation']['temp_c']}
    })

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

从画布中导出图像的打印尺寸（300 DPI）

1 个答案: