在画布上绘制图像并导出打印质量图像 [英] Draw Image on Canvas and export print quality image

问题描述

我在做什么：

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

我想做什么：

<当用户下载图像时，用户应该能够打印它。目前我正在研究长度： 5 X 8 （英寸）。在 Fabric.js ， toDataURL（）函数默认情况下会给出 72 DPI image，我打算使用 PHP 将它转换为 300dpi 图片。

因此，用 300dpi 5X8 c>，图片应该是 1500px X 2400px 。但我不能为用户提供太多的空间，因为它不会非常直观。

所以，我按照以下链接建议的做法：

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

问题：

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

解决方案

你不应该直接使用尺寸来设计canvas。
在不超过屏幕尺寸的情况下设置canvas属性的宽度和高度：

 < canvas width =500 height =400>< / canvas> 
  

导出为图片时使用

  canvas.toDataURL（{multiplier：4}）; 
  

这将为您提供比屏幕大4倍的画布。

使用样式设计画布以减少其尺寸并使用dataURL创建更大的图像会使整体体验变得更糟。

样式用画布不能理解的东西将画布挤到眼睛上。所以你不会得到正常大小的控件。

  //删除那些
 width：400px！important; 
 height：600px！important; 
  

http://jsfiddle.net/Q3TMA/1043/

What I am Doing:

I am using Fabric.js to develop a canvas application. Users can place image or texts in the canvas

What I want to Do:

When the user downloads the image,the user should be able to print it. Currently I am working on length: 5 X 8 (inches). In Fabric.js, toDataURL() function by default will give 72 DPI image and I am planning on using PHP to convert it into 300dpi image.

So to create a high quality image of 5X8 with 300dpi, the image should be 1500px X 2400px. But I cant give that much of space for the user since it wont be very intuitive.

So, I did what was suggested in the below link

What is the best practice to export canvas with high quality images?

Problem:

But I am facing a trouble. When the user places a text or image ,it appears very small.When I click on a text or image, the corners and borders are barely visible. It considers the relative size of the canvas. Please see the Fiddle

解决方案

You should not style canvas directly with dimensions. Set the canvas attribute width and height, without exceeding the screen dimensions:

<canvas width="500" height="400" ></canvas>

When exporting to image use

canvas.toDataURL({multiplier: 4});

This will give you a canvas 4 times bigger the one on the screen.

Styling the canvas with the style to reduce its diemension and having a bigger image with dataURL will make the overall experience worse.

The style squeeze the canvas to your eyes with something that fabricjs is not ready to understand. So you will not get normal sized controls.

//remove those
width:400px !important;
height:600px !important;

http://jsfiddle.net/Q3TMA/1043/

这篇关于在画布上绘制图像并导出打印质量图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！