相关疑难解决方法(0)

我想使用fabric.js将Canvas下载为PNG.在下载时我想缩放图像.所以我使用multiplier了toDataURL()函数的属性.但我得到了失败 - 网络错误

PS:如果我不给multiplier属性,它正在下载,但我确实想要使用multiplier属性,因为我必须缩放图像

这就是我在做的事情:

HTML代码:

<canvas width="400" height="500" id="canvas" ></canvas>
 <a id='downloadPreview' href="javascript:void(0)"> Download Image </a>

JS

document.getElementById("downloadPreview").addEventListener('click', downloadCanvas, false);

var _canvasObject = new fabric.Canvas('canvas');

var downloadCanvas =    function(){
    var link = document.createElement("a");

link.href = _canvasObject.toDataURL({format: 'png', multiplier: 4});
      link.download = "helloWorld.png";
     link.click();

}

我需要你的帮助.我解释了我的情况:我正在使用fabric.js库在我的应用程序中放置形状,文本等.我的画布尺寸为1000x1000像素(约26.45x26.45厘米).我有一个图像上传脚本,仅用于高质量的上传图像,如300 dpi.

基本上我做的是: - 画画布(上传图片,放文字等等); - 调整画布大小乘以比例因子,以便最终得到300dpi的图像; - 以PNG格式保存画布; - 使用php/ajax和Imagick,以300 dpi的质量放置画布,以jpg格式保存.

问题是:当我保存画布时,上传图像的质量将会下降,因为我调整画布的大小是72 dpi(此时我保存在PNG中).

我认为一个可能的解决方案是:在上传图像时,将位置保存在x和y位置和大小的数组中,直到整个过程结束,替换JPG中的图像.如果这是最好的方法,可以使用Imagick库或PHP实现吗？

我想知道你对它的看法.

谢谢.