fabricjs | 易学教程

Write custom text on image canvas with fabric.js and HTML5

阅读更多关于 Write custom text on image canvas with fabric.js and HTML5

I am using HTML5 and fabric.js for uploading multiple images. I want to add custom text on this image canvas. Right now I am uploading multiple images into canvas one by one. After uploading images I want to add custom text on canvas. var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change",function (e) { var file = e.target.files[0]; var reader = new FileReader(); console.log("reader " + reader); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 70, top: 100, width: 250,

How to edit a FabricJS IText and apply new styles (e.g. highlighting, etc…)

阅读更多关于 How to edit a FabricJS IText and apply new styles (e.g. highlighting, etc…)

I want to edit the highlighted characters in a text in canvas using fabric.js, like change its color, font, style etc. just like this http://fabricjs.com/test/misc/itext.html to @user43250937 hey uhm. I tried it and it works! :D thanks. I tried Underline, Bold, Italic, but I have a problem changing the color of the text, I tried : // "cinput" is the id of the color picker. addHandler('cinput', function(obj) { var color = $("#cinput").val(); var isColor = (getStyle(obj, 'fill') || '').indexOf(color) > -1; setStyle(obj, 'fill', isColor ? '' : color); }); Usually answers without a description of

How to upload an image to a canvas with Fabric.js?

阅读更多关于 How to upload an image to a canvas with Fabric.js?

I want that to create a process where the users can upload their images and then edit them in the browser in a Canvas with Fabric.js using some buttons -wich uses Fabric.js to add some effects-. I can't make it work. My HTML is: <form id="uploadImg" runat="server"> <input type="file" id="uploadedImg"/> </form> <canvas id="canvas"></canvas> The Javascript is the following: var canvas = new fabric.Canvas('canvas'); canvas.setHeight(480); canvas.setWidth(640); $('#uploadedImg').change(function () { var imgData = $(this).files[0]; fabric.util.loadImage(imgData, function(img) { var oImg = new

Fabric.js - Grouped iText not editable

阅读更多关于 Fabric.js - Grouped iText not editable

问题 The title says all. When a fabric.IText is part of a fabric.Group , it no longer reacts like a editable text. Here is a use-case: http://jsfiddle.net/vAjYd/ Is there a way to solve this problem? Otherwise I have to write my on group. Btw: A fabric.Group has many advantages, but the disabled eventing makes it impossible to use for UI-Elements (i.e. this use-case or groups of buttons as groups of texts and rects). 回答1: Currently there is no way for IText to handle the events as they are not

How to give browser “save image as” option to button

阅读更多关于 How to give browser “save image as” option to button

I'm working on a canvas drawing project. I convert the canvas as an image, then I save that image as '.png'. I have to right click on the image and select the 'save image as' option. But I want to provide that option through a button. When I click the button it should be saved. Any example or idea would be appreciated. This is a js function that converts canvas to png. function save2() { window.open(canvas.toDataURL('image/png')); var gh=(canvas.toDataURL('png')); alert("converted"); } In modern browser you can use the download attribute function save2() { window.open(canvas.toDataURL('image

Find the coordinates of the corners of a rotated object in fabricjs

阅读更多关于 Find the coordinates of the corners of a rotated object in fabricjs

问题 Suppose I have an image in a fabricjs canvas. I can easily calculate the coordinates of the corners based on the image's top & left values, and its size. How can I do so when the image is rotated by any degree? Example: EDIT: Preferably without the use of trigonometry, if there is a simpler method implemented in fabricjs itself or somewhere else. 回答1: Yes, of course. We store those coordinates in object's oCoords oCoords.tl.x, oCoords.tl.y // top left corner oCoords.tr.x, oCoords.tr.y // top

How to use / include fabricjs in Angular2

阅读更多关于 How to use / include fabricjs in Angular2

I want use fabricjs in my project. I installed fabricjs using bower and linked in index.html. but it is not working. Please see the below code. index.html <html> <head> <script>document.write('<base href="' + document.location + '" />'); </script> <title>Image Editor</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap/dist/css/bootstrap.min.css">   <script src="libs/core-js/client/shim.min.js"></script> <script src="libs/zone.js/dist/zone

Undo Redo for Fabric.js

阅读更多关于 Undo Redo for Fabric.js

I'm trying to add undo/redo functionality to my Fabric.js canvas. My idea is to have a counter which counts canvas modifications (right now it counts the addition of objects). I have a state array, which pushes the whole canvas as JSON to my array. Then I simply want to recall the states with canvas.loadFromJSON(state[state.length - 1 + ctr], As the user clicks on undo, ctr will reduce by one and load the state out of the array; as the user clicks on redo, ctr will increase by one and load the state out of the array. When I experience this with simple numbers, everything works fine. With the

How can i change the rotation icon in fabricjs

阅读更多关于 How can i change the rotation icon in fabricjs

问题 Please guide me to modify Fabricjs to add custom icon for Rotation. I get some of the answers but it is not working fine. Please let me know the code to change a particular rotation icon only. 回答1: For fabricjs above 1.6.6 changing function object prototype drawControls, small changes on hasRotation condition, result can be seen this JSFidle fabric.Object.prototype.drawControls = function (ctx) { if (!this.hasControls) { return this; } var wh = this._calculateCurrentDimensions(), width = wh.x

Loading JSON in canvas with fabric.js

阅读更多关于 Loading JSON in canvas with fabric.js

I am trying to save data in JSON and load it back into the canvas with fabric.js I keep getting errors likep with the following simple code: canvas.add(new fabric.Rect({ width: 50, height: 50, fill: 'red', top: 100, left: 100 })); var c = canvas.toJSON(); canvas.clear(); canvas.loadFromJSON(c); I get: SyntaxError: JSON.parse: unexpected character [Break On This Error] var Cufon=(function(){var k=function()....Image.fromElement.async=true})(this); When I use my own JSON, It validates well, but I still get errors when I use whatever was output by fabric's method canvas.toJSON(). Anyone would