carstenschaefer / drawerjs Goto Github PK
View Code? Open in Web Editor NEWA customizable WYSIWYG HTML canvas editor.
Home Page: https://www.drawerjs.com
License: MIT License
A customizable WYSIWYG HTML canvas editor.
Home Page: https://www.drawerjs.com
License: MIT License
I would like to know if we can perform some edit operation on an Image inserted on DrawerJS Layout Editor.
I am saving canvas data and reloading it via the loadCanvasFromData method. That works fine, however if the canvas size that I am loading to differs from the canvas size that the drawing was created on, then the sizing and position of the objects are incorrect. I think this is because the canvas data saves exact position instead of a relative measure (such as percentage). Is there a solution for this issue?
{ "type": "PRect", "originX": "left", "originY": "top", "left": 765, "top": 714, "width": 519, "height": 184,
Switching to pencil / eraser and using them creates non-stop requests for the pencil / eraser icon if those are not at the default location even if basePath is set properly.
I think that those lines:
if (_this.options.cursorUrl == 'eraser') {
var drawerFolderUrl = window.location.href;
if (_this.options.cursorUrl == 'pencil') {
var drawerFolderUrl = window.location.href;
should be changed to
if (_this.options.cursorUrl == '...') {
var drawerFolderUrl = util.getDrawerFolderUrl();
Sorry, I don't not really know how to create pull request.
Hi All,
I am saving the drawn item to local storage and rendering the canvas of the html page when the page is reloaded.
`
saveDrawing () {
var serializedData = window.drawer.api.getCanvasAsJSON();
var res = JSON.stringify(serializedData)
if (res) localStorage.setItem('canvas', res)
},
loadDrawing () {
var parseData = JSON.parse(localStorage.getItem('canvas'))
window.drawer.api.loadCanvasFromData(parseData)
}
`
I get the exceptions saying
TypeError: Cannot read property 'loadFromJSON' of undefined
at DrawerConstructor.Drawer.loadCanvas (drawerJs.standalone.js:29762)
at DrawerApi.loadCanvasFromData (drawerJs.standalone.js:27517)
at VueComponent.loadDrawing (DrawTool.vue?fd05:304)
at VueComponent.mounted (DrawTool.vue?fd05:248)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4213)
at Object.insert (vue.runtime.esm.js?2b0e:3139)
at invokeInsertHook (vue.runtime.esm.js?2b0e:6340)
at Vue.patch [as patch] (vue.runtime.esm.js?2b0e:6559)
at Vue._update (vue.runtime.esm.js?2b0e:3939)
How to fix this?
drawerJs.standalone.min.js:5 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
at i.drawCacheOnCanvas (https://localhost:44351/js/drawerJs/drawerJs.standalone.min.js:5:117945)
I'm using a CentOS 6.9 / Firefox 52.5.1 and the drawing performance is not very good. When I'm using the free drawing mode there's a lot of latency between my pointer movement and the appearance of the line.
I've noticed that if the canvas is small like 200x200 pixels the latency is almost gone. But if create a bigger canvas like 1280x720 pixels the latency can reach almost a second! The bigger the canvas the bigger the latency.
No such problem on Windows 10 / Firefox and MacOS High Sierra / Firefox or Safari. I've tested with the provided example: https://carstenschaefer.github.io/DrawerJs/examples/fullscreen/.
Not sure if the issue is something platform specific to Linux Firefox or the issue is with DrawerJs.
BTW excellent work! Thanks.
How we can provide GridLine over in Drawer JS library!
I am trying to provide the GridLine (vertical & horizontal lines) feature over canvas while initializing the Drawer JS, but not found any solution.
Can someone please suggest is there have any functionality to provide the GridLines using Drawer JS ?
Do you plan to migrate your library from grunt + bower to webpack, yarn ?
How to change mouse pointer icon for Text Box in DrawerJs Canvas. Suppose when I clicked on Text Box to write text so default mouse pointer is + icon but requirement to replace with Pencil Icon.
Using the API example, it doesn't allow the pen from a touch device to draw, only a mouse. Am I missing a config setting or is it designed this way
Hi All, I am new to this tool. I wish to add it in my vue web page.
I tried the following to implement it but it throws issue like this.
ReferenceError: DrawerJs is not defined
How to fix this?
import drawerLocalization from './DrawerLocalization'
import drawerJsConfig from './redactorConfig'
import DrawerJs from './Drawer'
var drawer = new DrawerJs.Drawer(null, {
texts: drawerLocalization,
plugins: drawerJsConfig,
defaultImageUrl: '/images/drawer.jpg',
defaultActivePlugin : { name : 'Pencil', mode : 'lastUsed'},
}, 600, 600);
$('#canvas-editor').append(drawer.getHtml());
drawer.onInsert();
})
Drawing vertical line doesn't work if degree value is between 90 - 88
This seems to be the same problem.
https://stackoverflow.com/questions/65592127/drawerjs-fixedbackgroundimage-is-not-able-to-fit-the-image-iside-canvas
I've downloaded all of the required files and make a project based on the standalone example. Everything is just fine but the image-upload function on google chrome, its working fine on edge.
When i look on my debug console it says:
[TOOL] [BackgroundImage] .activateTool() [BaseTool]
Drawer.js:630 [TOOL] [BackgroundImage] : deactivateTool [BaseTool]
It should open an "upload' window but it didnt.
can somebody help me?
In some explorer won't show the file selection dialog,because in the "_showDialog" function,the element input should putinto the document node,here is the original code:
ImageTool.prototype._showDialog = function() {
var acceptedMIMEStr = this.options.acceptedMIMETypes.join(',');
var
$el.on('change', this._processFileInput.bind(this));
$el.click();
};
and the below one will work:
ImageTool.prototype._showDialog = function() {
var acceptedMIMEStr = this.options.acceptedMIMETypes.join(',');
var
$el.on('change', this._processFileInput.bind(this));
$(document.body).append($el);
$el.click();
$(document.body).remove($el);
};
and also the BackgroundImageTool plugin in the "BackgroundImageTool.prototype._showDialog" function should modify as above。
As i have read the DOcs. I can see there is a Close Button to close current DrawerJs instance,
But how can i close current DrawerJs instance through JS Code ?
Is there an already developed way to detect events as they happen with each shape. For example, if a shape is clicked or pressed? And then be able to implement an event handler?
Add any shape, set fill color to transparent, It is not setting the transparent but instead it setting the black color
Event if i set the colors in the options, it has no effect
It means, i cannot change the default color list, or add some new color to the default 66 colors ....
It seems the issue also happens in the 3 demo pages. haven't checked other branches but on master branch it doesn't work no matter what the settings are
Just wondering how can i set a background solid color.
I want this feature on initialize and also after initializing the user can pick from a predefined list of colors.
Hi
I am using this library on my website but I have some problem related to text field.
Firstly I wanted to have the text have a fixed width. Can you please let me know how to do that?
Secondly the text alignments button doesn't seem to be working. So I entered 7-8 lines of text in text element and then clicked justify but nothing happened. Please help with this.
Thanks
jquery.js:3869
Uncaught TypeError: Cannot read property 'Add Drawer' of undefined
at init.t (drawerJs.redactor.js:26512)
at init (drawerJs.redactor.js:26428)
at init.eval (eval at (redactor.min.js:12), :1:25040)
at String.proxy (jquery.js:496)
at Function.each (jquery.js:362)
at init.plugins (eval at (redactor.min.js:12), :1:24684)
at init.callEditor (eval at (redactor.min.js:12), :1:21742)
at init.setCodeAndCall (eval at (redactor.min.js:12), :1:21401)
at init.run (eval at (redactor.min.js:12), :1:20171)
at new init (eval at (redactor.min.js:12), :1:7354)
Redactor 10.2.5 as widget for yii2 (link)
JQuery v3.2.1 and jQuery Migrate v1.4.1
We are opening whiteboard when a user clicks on a link available in our web application. As of now, the experience is, the user has to click on the link available on our web page. This will take the user to the page where we have implemented whiteboard. But again here the user has to click on the image window("Click here to start") to interact with the whiteboard. This takes 2 user interaction(click on the link in our web application and click on whiteboard image). We would like the user to click only on the link available in our web application and then need to render whiteboard without any further clicking. is this possible?
I read that v2.x of FabricJS had some breaking changes and I believe that this directly affects DrawerJS. I didn't find any mention of breaking changes with version 3.x of FabricJS. Has there been any consideration of fixing DrawerJS to work with v2.x or v3.x of FabricJS? Any recommendations on where to start?
The functionality that I believe a new version of FabricJS fixes include:
Hey
Is there a way to move or delete a line which was drawn with the pencil-tool?
Thanks for the promising tool! I'm trying to integrate it into a page that is served at mydomain.com/articles/new
while the js is served from /assets/drawerJs/dist/drawerJs.standalone.min.js
etc.
First I ran into trouble because of this, which was "solved" by moving everything into a dist
folder, but now I'm stuck because of this...
So instead I think it would be good to have a baseUrl
(or similar) config option which I could set to /assets/drawerJs/dist/
.
Have uploaded files in a folder on server of my provider.
Added a Basepath.
everything is working like a charm except INSERT AN IMAGE and INSERT A BACKGROUND IMAGE.
Does anyone have had the same issue and can give a hint how to fix it?
I have a canvas that requires, the person to draw a rectangle multiple times. Each time the person has to re-select the Rectangle Shape from the toolbar. Is there a way to keep using the Rectangle tool after creating a single instance ?
For default config, I have this
defaultActivePlugin: {
name: 'Rectangle',
mode: 'lastUsed'
}
but this is for init
only.
When launching "npm start" I get this on linux pc.
Warning: Command failed: Chrome "http://localhost:8081/examples"
/bin/sh: 1: Chrome: not found
Use --force to continue.
Aborted due to warnings.
I changed Chrome to google-chrome in Gruntfile.js and it started.
Hope it helps others with same problem.
We have imported the Canvas contents to JSON but I would like to know that is it possible to do the reverse way,i.e. to Load the Canvas contents by passing the JSON data.
Please refer the attached JSON fiel data for the same.Also note that I have extended the existing JSON object model to support "typeId" parameter
Regards,
Vinayak
LayoutEditor_20201023_021817.txt
Method loadImageFromUrl creates image without taking into consideration if there was a crossOrigin setting in the options. As the result one will get a security error later if use an image from a different origin.
Proposed solution:
if (options.crossOrigin) { image.crossOrigin = options.crossOrigin; }
after onload set.
Hi guys!
The function [getTemporaryCanvas] of [Util.js] have a incorrect value asignment: "canvasHeight = originalCanvas.width" <-- here is
This generates a crop to a square of [width x width] in the render when height of canvas is grather than width.
Sorry for my English; See you!
Please check demo in IE11. Increase size, then try to draw. It won't change size.
i want to use it in component. but canvas creating in the end of html document, not in component.
How i can move canvas in some container?
Hello , firstly thank you for this good library.
I am trying to record canvas actions as video when users drawing on canvas.
Everything is fine but only onething I need to fix. and I dont know how can I fix this. I couldnt find anything about this in your documentation :(
The problem about Freehand drawing pencil, I need to update canvas path value every single mouse move. Because DrawerJs is updating canvas when mouseUp and canvas recorder cant catch the mousemove actions.I was try to change _onMouseMoveInDrawingMode function , it works but its not a good solution. Because something is wrong and I cant control cursor on canvas because its being so slowly and difficult to draw anything.
Here is my code from drawerJs.standalone.js
_onMouseMoveInDrawingMode: function(e) {
if (this._isCurrentlyDrawing) {
var pointer = this.getPointer(e);
this.freeDrawingBrush.onMouseMove(pointer);
// I added this region for set path values from every single mouse move
if (this.clipTo) {
this.contextTop.restore();
}
this.freeDrawingBrush.onMouseUp();
// end
}
this.setCursor(this.freeDrawingCursor);
this._handleEvent(e, 'move');
},
/**
* @private
* @param {Event} e Event object fired on mouseup
*/
_onMouseUpInDrawingMode: function (e) {
this._isCurrentlyDrawing = false;
if (this.clipTo) {
this.contextTop.restore();
}
//this.freeDrawingBrush.onMouseUp();
this._handleEvent(e, 'up');
}
I hope you can help me for fix this problem.
Thank you.
Best regards
Hi,
I have removed the file input dialog and replaced it with a default Image using the Image Insert Plugin.
I want to allow user to change Image again after setting the default Image icon. Please let me know if this is possible WRT DrawerJS
If the plugin BackgroundImage is initialised with fixedBackgroundUrl image is not stretched until you resize the canvas manually from the resize control.
'BackgroundImage': {
imagePosition: 'stretch',
fixedBackgroundUrl: imgSrc,
},
If you create a background image from the api the stretch property is respected.
drawer.api.startEditing();
drawer.api.setBackgroundImageFromUrl(imgSrc, {imagePosition: 'stretch'});
But if you click outside the canvas and than back on the canvas the image is no longer stretched.
Hi,
Please fix the eraser.
it restores erased content back when mouse button released.
Tnx.
Hi, DrawerJs is great to embed and use. I was wondering if there were attempts to implement single vertex editing once a polygon was closed? If not, what would be the way to go about that?
Is there a guide on how to create custom plugins?
I tried to put a drawerjs inside bootstrap modal using the following code:
$("#mymodal").modal('show');
var drawer = new DrawerJs.Drawer(null, {
plugins: ['Pencil'],
defaultActivePlugin : { name : 'Pencil', mode : 'lastUsed'},
}, 300, 300);
$('#drawer-modal .modal-body').append(drawer.getHtml());
drawer.onInsert();
The canvas would appear initially but once clicked the toolbars won't appear and nothing works.
I tried also the featherlight lightbox:
$.featherlight('.container', {
closeOnClick: false,
afterContent: function (event) {
var drawer = new DrawerJs.Drawer(null, {
plugins: ['Pencil'],
defaultActivePlugin : { name : 'Pencil', mode : 'lastUsed'},
}, 300, 300);
$('.featherlight-inner').append(drawer.getHtml());
drawer.onInsert();
}
});
And this time upon clicking the canvas the toolbars appear but I can't draw anything.
Anything that can be done to make any of those work or it is not supposed to be used like that?
Sorry couldn't make a JS fiddle because there was no DrawerJS CDN I could find.
how can solve this problem?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.