pwambach / angular-canvas-painter Goto Github PK
View Code? Open in Web Editor NEWAngular.js directive to paint on a canvas on desktop or touch devices
License: MIT License
Angular.js directive to paint on a canvas on desktop or touch devices
License: MIT License
Hi. Thank you for this great directive.
I was able to integrate it in my project, but I'm having trouble acessing the canvas content in my Angular controller.
I need to convert the canvas to an image and save it in my database via API.
Thank you in advance,
Rodrigo
Hello, first of all thank you for this directive, you spared me a lot of troubles and it's very well done.
In my app, I have implemented the functionality of persisting the image (via toDataURL) server side. To do this I have a button that "confirms" the modifications done to the canvas and freeze them in the exported image.
I think that would be nice to have a variable that exposes if the canvas has been ever touched, so I can ng-enable my button to this var. Or better to pass an event to the directive that is fired every time a modification is done in the canvas (e.g. in the copyTmpImage function, if I understood well how the directive works).
What do you think about this? I can try to implement it if you're interested, even if I'm not very good with directives yet.
Thanks again
Marco
Hi! I had a need to reset the canvas back to it's empty state. I made a pull request to address this situation.
My suggested api involves setting the value-bound variable to 'reset' instead of a number, and this will run the init() function that simply sets up the directive's canvas as if it had just been compiled.
It's working great in our app so far, I urge you to accept this PR so we can continue using your fork :)
It would be nice to be able to load an existing image into the canvas by providing a URL. Currently I have to do it in my controller using something like this:
var imageObj = new Image();
imageObj.onload = function () {
var context = $('#pwCanvasMain').get(0).getContext('2d');
context.drawImage(this, 0, 0);
};
imageObj.src = 'http://example.org/image.png';
I love your work,
I do some tweak in order to the image width and height match the canvas container
ctx.drawImage(this, 0, 0,options.width,options.height);
Could you add another options to change default canvas ID and download image feature?
Hello,
I have started playing with the canvas-painter, and it looks very promising so far :)
The only thing is that I would like the canvas to take the full width of my page, and it seems the options only accept 'px' width. Do you have any plan to support a '%' width?
On a related note, it looks like you can't resize the canvas once it has been instantiated (the only watched options are related to the drawing style). Is there a reason for this?
Thanks for your work!
Sébastien
Hello, I verified that on mobile android browsing the touch position recognition fails, adding a mostly horizontal offset to the touched point. This happens both on a one plus one phone and on a n7 tablet.
On an iPad it behaves correctly.
I tried with no luck to enable the iOS mode also for android user agents.
If you need i can provide a video of the reproduction.
If i find a solution meanwhile i'll let you know
Best regards
Marco
It's not a bug but a feature.
You library is almost perfect, I would just need an araser and the possibility to add an bacground image.
Is it possible for you ? Or could you just help me to add this features in your directive ?
hi,
I faced an issue with pwCanvas when I include it on a bootstrap modal pop up in mobile devices. For basic modal popups it is working fine. But when you have a scrollable page & at the bottom of the page put a button to pop up a bootstrap modal, temp canvas you used in the library couldn't fine the absolute location to draw.
Any idea why it is behaving like that?
Hi. I'm just starting to deal with Angular.
I want to add to your painter in my application. In a separate file, I have everything works as it should. If I try to add it in my application, canvas is not created. The code is not working. I'll be glad if you look.
www.zip
If the canvas is placed within a centrally aligned div (text-align: center) drawing on the canvas produces line that suddenly offset.
For users with a touchscreen-notebook the trackpad / mouse aren't working. I think this is because of line 229 of of https://github.com/pwambach/angular-canvas-painter/blob/master/js/pwCanvas.js because it uses if (!isTouch) {
, meaning if a device has touch AND non-touch it won't work?
Hello,
Great plugin!
But it seems that it's not working on IE10 / 11 when using tactile device.
Hello,
I'm getting an odd error that sometimes, when the page is loaded, the pw-canvas src element is not loaded.
My pw-canvas is under a ui-route template.
Someone have any ideia about why this is not working properly?
Thanks.
Treat this as a future Enhancement
I think it would be nice some basic text support, something like right-click/insert text here, nothing more.
The text font and size could be configured in the options object.
Just a small bug in angular-canvas-painter.min.js
: where you define the templateCache for pwCanvasPaint
div, those canvas are also defined causing 4 canvases in the end. So <div class="pwCanvasPaint" style="position:relative"><canvas id="pwCanvasMain"></canvas><canvas id="pwCanvasTmp" style="position:absolute;top:0;left:0"></canvas></div>
should change to <div class="pwCanvasPaint" style="position:relative"></div>
. It's only in the minified js file.
Thank you for great library!
I met the following problem.
OSX 10.11.5
Chrome 46.0.2490.86 (64-bit)
black is selected on color selector.
drew line color is black but nothing is selected
How can I save in MySQL, for future get and redrawing the same?
I'm having issues loading larger base64-encoded images into canvas background. I haven't been able to find anything related to a file size limit in the docs or source. Is there something that I'm missing?
Base64 images with character length < 400,000 seem to work fine. But a 700,000 character length one will not load as background image.
Thanks.
Hi,
Thanks for the great directive. I use the directive in my project, but the error below appeared:
GET http://localhost:63342/templates/canvas.html 404 (Not Found).
Error: [$compile:tpload] http://errors.angularjs.org/1.4.3/$compile/tpload?p0=..%2Ftemplates%2Fcanvas.html&p1=404&p2=Not%20Found.
The only difference with your demo is I use the directive in the view which is linked by angular routing, I also added the 'pw.canvas-painter' in my module.
I'm looking for a way to not only change the cursor to a circle when mousing over the canvas (that part isn't really the issue, should be easy enough to figure out) but also change that circle dynamically to match the brush size selected by the slider. Is that possible and if so, how would I need to go about accessing the brush size data? I'm still pretty new to Angular so any ideas or hints are helpful :)
This is a great tool, really enjoying it!
There is any zoom function working with multi-touch?
Thanks
It is off course more a question than an issue. I would like to give thanks to the author for this wonderful directive concerning on a smooth drawing pattern. I will be working in a project that surely will need to put the hands on some details of this code.
The question by now is:
I need to setup a transparent background for the canvas. Is there a way to create this?
I have tried configuring the backgroundColor property with transparent but no luck.
Help is really appreciated.
Angular 1.5.8
Webpack 1.13.2
I'm importing the lib as followed:
import angularCanvasPainter from 'angular-canvas-painter';
export default angular
.module('projectName', [
// 3th party
angularCanvasPainter,
// application
components,
common,
])
.directive('app', appComponent)
;
and getting this error:
Argument 'module' is not a function, got Object
Is webpack not supported? How can I fix this?
Add feature to undo the last action or the last x actions
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.