Tag: fabricjs

如何减少JSPDF创建的文件大小？: 我正在使用jspdf.js从HTML 5canvas创建pdf。但是，无论内容是什么以及canvas大小有多大，生成的文件大小始终为32,874 KB，即使canvas完全为空。为什么文件大小始终相同？ jsPDF版本是1.1.135。我的代码是这样的： var imgData = canvas.toDataURL(“image/jpeg”, 1.0); var width = $(“canvas”).attr(‘width’); var height = $(“canvas”).attr(‘height’); var pdf = new jsPDF(‘p’, ‘pt’, [width,height]); pdf.addImage(imgData, ‘JPEG’, 0, 0, width, height); pdf.save(“download.pdf”); 更新：完整代码： $scope.rasterizePDF = function() { if (!fabric.Canvas.supports(‘toDataURL’)) { alert(‘This browser doesn\’t provide means to serialize canvas to an image’); } else […]

如何在fabricjs多边形中创建一个洞: 我想用fabricjs在多边形内部fabricjs 。我可以使用普通的逆时针html5canvas制作它，如下所示，但我更喜欢使用fabricjs 。有谁知道如何使用’fabriicjs’实现附加图像？像这样：

单击canvasHTML5上的按钮后，上传的图像显示与背景图像: 我正在使用HTML5和fabric js。我正在拍摄背景图像，并在此背景图像上传图像。但是，当我将canvas转换为图像时，只有上传的图像才会出现。我会告诉你屏幕截图。点击提交按钮后：在第二个屏幕截图中，只会上传图像。但我想上传的图像应该带有背景图片。码： canvas{ border: 1px solid black; } #canvascolor input { height:50px; width:50px; } submit var canvas = new fabric.Canvas(‘canvas’); $(“#canvascolor > input”).click(function () { var img = $(this).attr(‘src’); $(‘#canvas’).css(“background-image”, “url(” + img + “)”); }); document.getElementById(‘file’).addEventListener(“change”, function (e) { var file = e.target.files[0]; var reader = new […]

使用fabric.js显示适用的控件: 使用fabric.js，如果仅选择文本，我将如何隐藏/显示控件（如文本控件）？现在我有一个按钮，可以让某人插入文本和文本编辑选项，但我并不总是希望这个显示。理想情况下，选择后它会成为弹出式窗口。现在，我的代码是： // Add image from local var canvas = new fabric.Canvas(‘c’); document.getElementById(‘file’).addEventListener(“change”, function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(f) { var data = f.target.result; fabric.Image.fromURL(data, function(img) { var oImg = img.set({ left: 0, top: 0, angle: 00, stroke: ‘#F0F0F0’, //<– set this strokeWidth: 40 //<– […]

转换后的图像应该有一些小的url而不是BaseCode: 现在我将图像上传到canvas上，在上传图像后，canvas由toDataURl转换为图像。如果我通过toDataURL将canvas转换为图像，那么我将获得基本代码（基本代码将很大）。我想要一些小url而不是BaseCode。 var canvas = new fabric.Canvas(‘canvas’); document.getElementById(‘file’).addEventListener(“change”, function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; var img = document.createElement(‘img’); img.src = data; img.onload = function () { if (img.width < 300 || img.height < 300) { alert("upload image should be […]

在Fabricjs中的组中resize时无法保持strokeWidth的厚度: 我正在编写代码以在Fabricjs中的所有对象上保持相同的strokeWidth。我能够成功维护普通对象的strokeWidth，让它成为矩形或椭圆形（我编写代码来维护它们）。但是当我使用group时，我无法保持strokeWidth。这是小提琴。重现问题的步骤？ 1）打开小提琴链接 2）调整圆的大小，检查边框的大小（重新调整大小时边框的厚度保持不变） 3）现在调整矩形和文本（组）的大小，预期结果是边框的厚度必须始终相同但不会发生。代码：` var gCanvas = new fabric.Canvas(‘canvDraw’); gCanvas.setWidth(700); gCanvas.setHeight(700); var text = new fabric.Text(‘test’, { fontSize: 30, top: 100, left : 100, fill : ‘red’}); // add some shapes – these are examples, others should work too var myRectangle = new fabric.Rect({ left: 100, […]

Fabricjs检测对象路径上的鼠标: 是否有可能捕获object:over仅当鼠标位于形状本身而不是包含它的假想方块上时才在Fabric.js中捕获？我有一个jsFiddle演示，它包含一个U形。你可以看到，即使我有指针在U内并且没有触及任何一条线，它仍然会将其检测为一个object:over event。使用Javascript： var canvas = new fabric.Canvas(“c1”, { isDrawingMode: false }); canvas.loadFromJSON(objectsJson, function () { canvas.renderAll(); }); canvas.on(“object:over”, function () { console.log(“object over”); }); canvas.on(“object:out”, function () { console.log(“object out”); }); // code to capture mouse over object while isDrawingMode = false canvas.findTarget = (function (originalFn) { return function () { […]

Fabric.js loadSVGFromUrl不显示多个导入的SVGS: 我正在使用fabric.js并将许多SVG文件加载到其中。使用此代码显示其中一个导入文件没有问题; fabric.loadSVGFromURL(‘ico-svg/drink.svg’, function(objects, options) { var drink = fabric.util.groupSVGElements(objects, options); drink.set({left: 80, top: 175, width: 32, height: 32 }); canvas.add(drink); canvas.calcOffset(); canvas.renderAll(); }); 但是，当我重复这段代码时，页面只显示两个SVG中的一个，它们实际上会在页面刷新时更改 – 只有一个图标会显示一次，一个图标会显示另一个，在奇怪的情况下它们都会显示但是其中一个SVG将无法完全显示。要加载另一个SVG，我只是复制上面的代码并更改所需的变量; fabric.loadSVGFromURL(‘exporttest.svg’, function(objects, options) { var dollars = fabric.util.groupSVGElements(objects, options); dollars.set({left: 80, top: 90, width: 350, height: 342 }); canvas.add(dollars); canvas.calcOffset(); canvas.renderAll(); }); fabric.loadSVGFromURL(‘ico-svg/drink.svg’, function(objects, options) { var […]

FabricJS对象与canvas不相关resize: 我正在使用FabricJS创建全屏canvas并保存更改服务器端。在加载它之前，我调整了canvas和背景的大小，以便在每个页面加载时，canvas都适合用户窗口。 canvas.setHeight($(window).height()); canvas.setWidth($(window).width()); canvas.backgroundImage.width = $(window).width(); canvas.backgroundImage.height = $(window).height(); 问题是canvas和背景得到调整但不是对象。它们相对于屏幕保持相同的位置，并且不会改变尺寸，因此在其他屏幕尺寸上是不相同的。怎样才能解决这个问题？

使用fabric js时获取canvas对象: 我正在使用Fabric.js，我在一个地方创建了一个织物canvas对象。 var x = new fabric.Canvas(“mycanvas”); 现在在另一个地方，我想访问这个’x’不可用的对象。那么我怎样才能获得相同的结构canvas对象。我不想改变x的范围或传递x作为arg。另外，如何从结构canvas对象中获取toDataURL？