Tag: fabricjs

Fabric.js – 如何使用自定义属性在服务器上保存canvas

我希望能够将当前canvas的状态保存到服务器端数据库，可能是一个JSONstring，然后用loadFromJSON恢复它。 通常情况下，这很容易实现： var canvas = new fabric.Canvas(); function saveCanvas() { // convert canvas to a json string var json = JSON.stringify( canvas.toJSON() ); // save via xhr $.post('/save', { json : json }, function(resp){ // do whatever … }, 'json'); } 接着 function loadCanvas(json) { // parse the data into the canvas canvas.loadFromJSON(json); // re-render […]

Fabric.jscanvas上的多个裁剪区域

为了制作照片拼贴制作 ，我使用具有基于对象的裁剪function的面料js。 该function非常好，但是剪辑区域内的图像不能缩放，移动或旋转。 我想要固定的位置剪辑区域和图像可以定位在用户想要的固定剪辑区域内。 我GOOGLE了，发现非常接近的解决scheme var canvas = new fabric.Canvas('c'); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(10,10,150,150); ctx.rect(180,10,200,200); ctx.closePath(); ctx.stroke(); ctx.clip(); 面料jscanvas上的多个裁剪区域 其中一个剪辑区域的图像出现在另一个剪辑区域中。 我怎样才能避免这种情况，或者是有另一种方法来完成这个使用结构js。

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

我需要你的帮助。 我解释我的情况：我正在使用fabric.js库在应用程序中放置形状，文本等。 我的canvas尺寸为1000×1000像素（约26.45×26.45厘米）。 我有一个图像上传脚本只能上传高质量的图像，如300 dpi。 基本上我所做的是： – 绘制canvas（上传图片，放置文本等）; – 调整尺寸乘以比例因子的canvas最终能够以300dpi的图像; – 以PNG格式保存canvas; – 使用php / ajax和Imagick，把canvas以300 dpi的质量，保存在jpg格式。 问题是：当我保存canvas时，上传的图像的质量将会下降，因为我调整了canvas的大小是72 dpi（在我保存PNG的那一刻）。 我认为可能的解决scheme是：上传图片时，将位置以x和y的位置和大小保存到整个过程的最后，以JPG格式replace图片。 如果这是一个最好的方法，可以使用Imagick库或PHP？ 我想知道你的意见。 谢谢。