相关疑难解决方法(0)

我使用FabricJs在Canvas上创建了一些带有一些图片和文本的设计(270x470)然后我通过fabricJS的canvas.toJSON()方法以JSON格式导出所有图片/文本信息现在我需要以高质量重新绘制该设计( 2790x4560)使用Imagick在PHP中的图像.

上面设计的JSON dataArray包含所有对象的信息,如大小,位置,角度等.

{
"width": "2790",
"height": "4560",
"json_data": {
    "objects": [{
            "type": "image",
            "originX": "left",
            "originY": "top",
            "left": "5",
            "top": "105",
            "width": "260",
            "height": "260",
            "scaleX": "1",
            "scaleY": "1",
            "angle": "0",
            "opacity": "1",
            "src": "http:\\example.com/images/098f20be9fb7b66d00cb573acc771e99.JPG",
        }, {
            "type": "image",
            "originX": "left",
            "originY": "top",
            "left": "5",
            "top": "229.5",
            "width": "260",
            "height": "11",
            "scaleX": "1",
            "scaleY": "1",
            "angle": "0",
            "opacity": "1",
            "src": "http:\\example.com/images/aeced466089d875a7c0dc2467d179e58.png",
        }, {
            "type": "image",
            "originX": "left",
            "originY": "top",
            "left": "51.07",
            "top": "135.58",
            "width": "260",
            "height": …

我正在寻找创建一个系统,用户在浏览器上用画布创建一个图像(借助paper.js或processing.js等),并能够打印一个大的(最多A3,300dpi理想)尺寸表示他们在画布上创造了什么.

显然,直接从用户浏览器中的canvas元素导出图像我只限于屏幕尺寸和分辨率等.

因此,当用户以较大的尺寸保存和捕获图像数据时,我已经研究了暂时放大canvas元素的解决方案.这可能是一个解决方案,但我很确定文件大小会在较大的尺寸下很快失控.

我没有非常多地使用Node.js,但是想知道是否有经验的人会知道Node是否能够实现这一目标,以及它是否是一个更好的解决方案,并简要说明我将如何解决这个问题？

我在做什么：

我正在使用Fabric.js开发画布应用程序。用户可以在画布中放置图像或文本

我想做的事：

当用户下载图像时，用户应该能够打印它。目前我正在研究 length: 5 X 8 (inches)。在 中Fabric.js，toDataURL()函数默认会给出72 DPI图像，我打算用PHP它来将其转换为300dpi图像。

因此，要创造一个高品质的图像5X8 与300dpi，形象应该是1500px X 2400px。但我不能为用户提供那么多空间，因为它不会很直观。

所以，我做了以下链接中的建议

导出具有高质量图像的画布的最佳做法是什么？

问题：

但我正面临一个麻烦。当用户放置文本或图像时，它显得非常小。当我单击文本或图像时，几乎看不到边角和边框。它考虑了画布的相对大小。请看小提琴

我正在使用一个API，该API需要我以300的分辨率捕获jpeg图像。

工作流程为：

1. 使用视频元素从集成摄像机流式传输。
2. “捕捉”视频照片，并将其绘制到画布元素上。
3. 使用.toDataURL（）将图像从画布移到图像标签。
4. 将该图像发送到API进行验证...

我遇到的问题是，我认为在画布上绘制的图像取决于它所在的网页/监视器的分辨率。虽然我可以改变图像的尺寸，使用CSS来缩小东西是两倍于寻找更高的水库; API一直在回叫我向他们发送的图像质量太低。

我最终需要利用集成摄像头来捕获和传输分辨率为300（或更高）的jpeg，但是我不知道仅靠前端代码是否可以实现。

谢谢您的帮助 ：）