websanova/wpaint

jQuery Paint Plugin

wpaint's Issues

Resizable Canvas

Thank you for excellent work. I'm trying to make the canvas resizable. I tried to use .resizable() which is part of jQuery UI and no luck (I presume wPaint using jQuery UI from the JS imports).

Please advice possible way to make the canvas resizable.

Thanks & Regards,
Sai Surya.

draw data

https://gist.github.com/kongaraju/5394641

I just added new method draw data but It is not functioning as expected.

I am using drawdown, drawmove, drawup to send data then using draw data method to draw.

But some data missing at the end and beginning, Is there anything wrong in my approach.

and drawing shape is also mysterious, I confused on taking event object and I just passing pageX and PageY.

I think that is major wrong step. may be I need to calculate the position.

Menus and canvas in the same 'box'

Hi again!

In my application I'm fading out some divs before the canvas.
Unfortunately, it changes the relative position between canvas and the menu.

A possible solution would be having an option in which the menu wouldn't be draggable, and would be generated right before the canvas. (but it would still have the problem with the text menu).

Another way could be to refactor the MainMenu:generate method, separating the code for positioning the menus in a new method. Then, the new could be used in this case.

ipad problems

Hi there,

I´m testing the new version with mobile support on my iPad. I setup a test site here: http://rvw.bespokestudio.com/test/

There seems to be a bug on iPad. It seems to sometimes use 0/0 position instead of last touched coordinates.

Would be great if you can look at it.

thank you!

spry tool needed

Is it possible to add spry tool in the tools options

Circle Ability

Hi,

Very good work,but there is no circle ability only ellipse is there any way to add circle or convert existing ellipse to circle

How can i destroy wPaint and renew

Hello,

I don't see the destroy function to destroy draw tool

How to draw a straight line?

I don't know where to set this option, I want to let user select to drawing a straight line or free hand

bgImage vs. imageBg

The actual parameter name is imageBg, but in README.md it says it's bgImage:

bgImage: './some/path/imagebg.png'

Add moveable symbols

I wanted to extend the plugin to add symbols to the canvas using something like raphael or jcavas. Would be a symbol icon, which spawns a new menu (similar to text menu), with a list of the sympols. Symbols would get passed as parameters similar to offsets=X, offsetY... array of paths for the images you wanted to include...

I've got the icon in the menu, but I'm having trouble following the code as to where I would attach an action to the button click... Any suggestions or guidance is appreciated !

Path being incremented

Each new instance of wPaint he is pushing the wrong path and ends up referencing the icons (in the first instance is correct):

GET http://localhost/Neolearn/wPaint/wPaint/plugins/main/img/icons-menu-main.png 404 (Not Found) jquery.js:7311
GET http://localhost/Neolearn/wPaint/wPaint/plugins/file/img/icons-menu-main-file.png 404 (Not Found) jquery.js:7311
GET http://localhost/Neolearn/wPaint/wPaint/plugins/text/img/icons-menu-text.png 404 (Not Found) jquery.js:7226
GET http://localhost/Neolearn/wPaint/wPaint/plugins/shapes/img/icons-menu-main-shapes.png 404 (Not Found)

GET http://localhost/Neolearn/wPaint/wPaint/wPaint/plugins/main/img/icons-menu-main.png 404 (Not Found) jquery.js:7311
GET http://localhost/Neolearn/wPaint/wPaint/wPaint/plugins/file/img/icons-menu-main-file.png 404 (Not Found) jquery.js:7311
GET http://localhost/Neolearn/wPaint/wPaint/wPaint/plugins/text/img/icons-menu-text.png 404 (Not Found) jquery.js:7226
GET http://localhost/Neolearn/wPaint/wPaint/wPaint/plugins/shapes/img/icons-menu-main-shapes.png 404 (Not Found)

...

I can define the path glbal to all instances?

Help

How can I save the drawing in binary format to put it in the database?

Circles, Rectangles and Line go over the image limits

Hi,

when creating an shape (circle, rectangles or lines) if I drag and drop over the canvas bound, the shape seems to be created outside the bound.. is it possible to forbid this to happen?

Definition/Translation of buttons tips

At the moment, we can not change the tip / title of buttons, because they are fixed in javascript code.

I propose to make it configurable:

• Create properties for this
• Or create template translation, like in jquery ui datepicker.

If you need more clarifications, please contact.

Best Regards.
Alexander Bulei

remove wPaint element

Hi,

Is it possible to remove the wPaint element?

I'm using ajax to load the body, and init wPaint.
But how to remove it? If I remove the main element, the menu is still there.

I can't find a remove() or destroy() method, but maybe i'm not looking in the right place.

Thanks for the great plugin.

Jeroen

Downloading the Image

Hi!!
I want to download the drawing done by user on the client side..
Glad if i get some help on this.
Thank You.

Draw + Transparency

Hi, is it possible to set transparency on the drawing?

I'm developing a web reader of magazines and newspapers, and I use this project to give the user a custom feature to "markings / notes". With transparency they would be able to use it as a "highlighter" feature on some pages.

Cannot load the icons menu image and cursor image ?

jQuery("#wPaint").wPaint("image") blank after drawing

Hey Websanova,

hope my icons work for you.

I have a strange problem that just started to happen out of nothing.

I draw on the wpaint canvas and then I try to retrieve the data with jQuery("#wPaint").wPaint("image"); and I get the data but it´s always a blank png.

help would really be appreciated.

cheers,
Kasper

wPaint in Android

Hi,

Thanks for the plugin, it is great!
However, I tried it with an Android tablet and it does't work properly. One of the advantages of not using a Flash plugin is to be able to use it on mobile applications.

Hopefully, it can be a small fix and soon we will be able to use it on Android.

Internet Explorer 8

Hi,
first, i found a minor bug:
The function clearAll: function() ends with a comma which causes an js error in the ie8. If i delete the comma, the error is gone and the ie8 shows the correct message:
"Browser does not support HTML5 canvas, please upgrade to a more modern browser.".

second:
any idea how to make te ie8 work with wPaint? I tried Googles Explorercanvas
http://code.google.com/p/explorercanvas/
but it didn't helP :-((

Thanks for help!
Manuel

PS: By the way: GREAT tool, good job !!

No license file or info

How can I get the (centerX,centerY) of the ellipse?

I'm trying to pass all the shapes I've drawn in my Web application to an Android application. For this I have to get some shapes coordinates. I've already done it for lines and rectangles, but how can I get the coordinates from an ellipse? Specially the center of it

Thanks!

How to set groups of rectangles?

I try to set a group of rectangles and similar forms (shapes label) but it's impossible for my. Can I help me:

This is my part of code error:

rectangle: {
icon: 'activate',
title: 'Rectangle',
group: 'shapes',
useRange: true,
index: 3,
callback: function () { this.setMode('rectangle'); }
}

Help me please

paint only in blank areas

Hi, I create this http://ricitosdeoro.zirculomarketing.com/club-ricitos-juegos-dibujando.php with this controls, is there a way to paint only in the white areas?

how can i draw from code?

wpaint cant save a image whit a background image in google chrome

hello Google chrome does not support a paint.js cannot save a image with an background but can save a image with a preload images

Cannot save image on android chrome

Hi!
Last time i tried painting on my chrome android device was a few months ago. I set up wPaint and could do just fine within minutes, so thats great. However I couldnt save the image on Chrome for Android. The save option was greyed out when I tried back then. I could open the image in both the other options.

I tried it today, and some of the latest updates made it possible to atleast click the option to save, but it doesnt do anything? Or have i missed anything? It doesnt save the image to the device when I hold my finger to get the menu and hit save.

By design, or a bug?

Regards,
David

Toolbar position outside the drawing

Hi,

It would be interesting to have an option to make the toolbar appearing outside the drawing.

Luís

Issue ColorPicker / jQuery Mobile

There is a conflict with jQuery Mobile and the color picker. When jQuery Mobile is included in the page, the color picker will not show. I have confirmed that the HTML is being changed to show, but it does not show.

As soon as the jquery mobile js file is removed (can leave the css), the color picker shows fine.

Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

Hi,

I started to get this error and wpaint is not running because of it.

My ..wPaint() call is in a window load function.

Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable. wPaint.js:642
Canvas.getImage wPaint.js:642
Canvas.addUndo wPaint.js:690
(anonymous function) wPaint.js:128
e.extend.each jquery.js?ver=1.7.2:2
e.fn.e.each jquery.js?ver=1.7.2:2
$.fn.wPaint wPaint.js:58
(anonymous function) (index):332
f.event.dispatch jquery.js?ver=1.7.2:3
h.handle.i

any help would be appreciated!

remove and add paint functionality

did you have any thing to remove all the functionality after paint once i am done. And load it when i need it. like removepaint button remove whole functionality or addpaint for adding whole paint functionality back when needed. Please let me know as soon as possible so that i can use it in my demo.

Making shapes movable

Hi,

I'm trying to make the shapes movable once they're drawn on canvas. I understand that you're busy :) Could you give me some guidance on where to start etc.

This is what I'm trying to achieve.
http://simonsarris.com/blog/510-making-html5-canvas-useful

I need a starting point because I'm a bit confused and lost in wPaint.js code.

Thanks & Regards,
Sai Surya.

Having trouble "uploading' image to server folder

Hi, I am having some trouble uploading the image to the server, the was folder created as per examples. all permissions are all set. I can't work out why it does not post the image.

I have set it to upload in the same directory as where the load images are located.

Any help will be appreciated to get this working,

function upload_image(id)
{
var imageData = $("#" + id).wPaint("image");

        $.ajax({
            url: '/images/demo/upload.php',
            data: {image: imageData},
            type: 'post',
            success: function(resp)
            {
                alert('successfully uploaded image!');
            }
        });

Changing fillStyle by javascript?

Im doing > $("#wPaint").wPaint("red", "#ff0000") < in a javascript and it runs the following code that i appended in wPaint.js.

...
... else if(option == 'red' && settings !== undefined) { alert(settings); }
...

How would I go about changing fillStyle (the fill color) to whatever settings is? I might be tired, but I just cant get it to change anything?

Can't set imageBg after wPaint is initialized

When it's initialized it works fine, but afterwards the bgCtx is not set.

draw data

Can I save draw data like x,y axis array or any data type ?(not image)
I want reload draw data from database,and make it editable and save.
can it possible ?

Removing the Draggable Feature

Can u please tell me what needs to be done to stop the draggablity of the wPaint..
As i don't want that feature..

[IE 9 - 10] Bug when draw with rectangle

Please take a look i have downloaded and test with IE the rectangle view not good

Error with external background DOM Exception 18

Hi, thank you for your wonderful plugin.

I want to paint over images what have URL outside my web.

I use:
$("#wPaint").wPaint({
imageBg: url, // of another domain
});

It works I can paint over the image, but when I try to capture the image:
var imageData = $("#wPaint").wPaint("image");

I have the error:
Uncaught Error: SecurityError: DOM Exception 18 wPaint.js:644

It seems some related with cross domain because the URL is not in my server.

Is there any way to solve this?

I do the same from a chrome extension and it works, but from a normal web I can't.

Thank you.

Oscar.

Creating image of entire page with all dom elements

Hi first million thanks for sharing this wonder full thing my use case is like Wpaint will load on a page which have some other dom elements once end user clicks feedback button will load wpaint menu user will add couple of shapes and text once he click send will capture entire page image and send it to give email ID

Currently was able to get only drawn shapes not page contents

Work on mobile?

Hi, How it work on mobile browser.

I'm trying to run it on iPad but not work. It's still drag the page.

How to solved.

Add nicer icons

The icons are ghetto, get a nicer look for it.

save image on server

if people want to save image on server (on website itself), then they should:

1. create a file named "saver.php"
2. insert this code inside it:

<?php $folder_name="./generated_images/"; if (!file_exists($folder_name)) { mkdir($folder_name, 0777);} $randomfilename = $_POST['namee']; $strng=$_POST['strng']; $data=str_replace('data:image/png;base64,','',$strng); $data = base64_decode($data); $im = imagecreatefromstring($data); imagepng($im,$randomfilename); imagedestroy($im); ?>

3. then insert the javascript function inside index.html, along with other javascript functions

function saveImageOnSite() { // variable to hold request var imageData = $("#wPaint").wPaint("image"); $("#canvasImage").attr('src', imageData); $("#canvasImageData").val(imageData); var request; // define current folder var myloc = window.location.href; var locarray = myloc.split("/"); delete locarray[(locarray.length-1)]; var currentfolder = locarray.join("/"); // generate random file name var randomnumbername='generated_images/' + Math.floor(Math.random()*1000000000000) + '.png'; // Send Request request = $.ajax({ url: "saver.php", type: "post", data: { 'strng': imageData , 'namee': randomnumbername}, }); alert("Your image url: " + currentfolder + randomnumbername);

4. then, insert somewhere a button :
   <a href="#" onclick="javascript:saveImageOnSite;">Click here to save image on server</a>

whenever you want to save the current image on server, click that button;

Drawing circles instead of ellipses

How can I only let user draw circles instead of ellipses?

I've tried to change this:

_self.ctxTemp.beginPath();
_self.ctxTemp.moveTo(e.x, ym);
_self.ctxTemp.bezierCurveTo(e.x, ym - oy, xm - ox, e.y, xm, e.y);
_self.ctxTemp.bezierCurveTo(xm + ox, e.y, xe, ym - oy, xe, ym);
_self.ctxTemp.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
_self.ctxTemp.bezierCurveTo(xm - ox, ye, e.x, ym + oy, e.x, ym);
_self.ctxTemp.closePath();
if(_self.settings.lineWidth > 0)_self.ctxTemp.stroke();
_self.ctxTemp.fill();

in drawEllipseMove() function

To this:

_self.ctxTemp.beginPath();
_self.ctxTemp.arc(aux1, aux2, r, 0, 2 * 3,14, false);
_self.ctxTemp.closePath();
_self.ctxTemp.fill();

Where aux1 and aux2 are center X and Y of the circle and r is the radius. But it doesn't draw anything. What can I change?

Any java implementation for saving the image?

Hey, good stuff. Do you have any references to a java implementation of server side code to save the image?

Disapeared all palette icon after upgrade.

So i just uploaded demo, but the same.

cannot clear after textbox

create a text then. the only text clearing not the whole textbox.

How to set the line height of the pencil to 10 on page load

I wanted set the line height for the pencil to 10, how to do that on page load.

Unable to draw line as expected position

Hi,

I'm using IE10 on Win7 and cannot draw line as expected position.
Same problem also occurs on following demo site
(occurs on middle & last canvas, and does not occur on first one).
http://www.websanova.com/plugins/paint#websanova

In addition,

• It looks this problem does not occur on Chrome v26 and Firefox v20.
• When setting browser's display scale of IE10 from 100% to 125%, this problem disappears.
  (However, on other browser, always does not occur regardless of display scale...)

It would be appreciated if you could help me(though i think this is bug).

Thanks and Regards,