stbeets supports this item


479 comments found.

Hi i just bought ur item and uploaded all the files to a testserver of bplaced.

i just realized that the images dont actually “save” after i resize them, if i check the accept button they just stays like this:

i didnt change anything in the files, i took the folder like i downloaded it and uploaded it :(

is it possible to include this stuff into codeigniter? if yes, is there a documentation or something how to do it?

Cheers, Daniel


already posted a comment at the item itself like 20 days ago.

I really need some support now for it. I downloaded the HTML 5 Upload image, ratio with drag and drop.

the images dont save properly if i use it…

Here the link:

Everything is working fine in the demo but on the download files must be an mistake.

I really need this to work now. Please update the files or something.

Cheers, Daniel


I tested your code… this is the AJAX response i get

<style>.bpe a:link, .bpe a:visited, .bpe a:active { color: #0b4c8e; text-decoration: none; } .bpe a:hover { color: #0D7CEC; }</style>
Warning: fopen(/users/dherzog/www/raumblaetter/tmp/1052158_565732640137029_859943589_o.c81526.jpg) [function.fopen]: failed to open stream: No such file or directory in /users/dherzog/www/raumblaetter/canvas.php on line 18
<style>.bpe a:link, .bpe a:visited, .bpe a:active { color: #0b4c8e; text-decoration: none; } .bpe a:hover { color: #0D7CEC; }</style>
Warning: fwrite() expects parameter 1 to be resource, boolean given in /users/dherzog/www/raumblaetter/canvas.php on line 19
<style>.bpe a:link, .bpe a:visited, .bpe a:active { color: #0b4c8e; text-decoration: none; } .bpe a:hover { color: #0D7CEC; }</style>
Warning: fclose() expects parameter 1 to be resource, boolean given in /users/dherzog/www/raumblaetter/canvas.php on line 20

So either the /tmp dir is not there (failed to open stream: No such file or directory in )... or something else is wrong on your server…?!

Hi, My question is how can i get filename on save in server image. As in case if we use Server image except of upload one then how we will be able to retrieve name of saved image. Feel free to contact with me for further details.

Thanks :)


cevseri Purchased

Merhaba, dosyayı php ile nasıl upload edebilirim veri tabanına ?


cevseri Purchased

Hi !

The smaller picture is saved as jpg when saving a continuous BETA..

png doesn’t register as

Does the drag and drop feature work any more with modern browsers? Even on your live demo it says “Please wait, image is loading” when you drop an image. Nothing happens (I’m using Chrome 58.0.3029.110)

It’s a shame this plugin hasn’t been updated in over 2 years. I know for one I would have continued to pay for support and continued to use it. As it is, the next chance I get to replace it, I will, which is a shame.

Hi my name is Roberto. I have same problems when I use your plugin and jansy bootstrap to file upload. When I use to first jansy for upload a file an then I use your plugin I get this error . Uncaught RangeError: Maximum call stack size exceeded at String.replace (<anonymous>) at Function.fb.matchesSelector (jquery.js:2) at Function.m.filter (jquery.js:2) at w (jquery.js:2) at (jquery.js:2) at m.fn.init.$.fn.val (bootstrap-select.js:133) at c.clear (jasny-bootstrap.min.js:6) at c.reset (jasny-bootstrap.min.js:6) at HTMLFormElement.e (jquery.js:2) at HTMLFormElement.dispatch (jquery.js:3). Why ? this is the link of Jansy bootstap: Thanks

ftwinks Purchased


I post form using “file” not “base64/json” and it works fine. But I need to be able to retrieve on my form post page in addition to “file” all image attributes: “imageOriginalWidth, imageOriginalHeight, imageWidth, imageHeight etc.” as simple ”$POST” values (or an array but keeping file as a regular file).

My image field name is “thumb” so I tried to get “thumb_height” > empty

Currently I setup my form with these settings: data-canvas=”true data-save=”false” data-originalsave=”true” data-ajax=”false”

I tried to play a bit with it but without success… So please tell me the name of $Post value.

Thank you.


Hi Sir/Ma’am,

It is a very nice plugin and easy to use. But right now I am facing an issue in IOS devices.When I try to crop a pic on mobile (I’m using iPhone and IPAD) image will be rotated, either by taking a photo or use an existing photo.

When I click the “tick” button on mobile the pic will be rotated 90 degrees and the image gets blurry. It works fine on the desktop. It would be great if you can help me for this issue.

Thanks in advance

Hi Is there any update or solution on this?

>So either the /tmp dir is not there

Oh, god. I had the same problem. Spent few hours of my working time trying to figure out the problem. Maybe you should add the script which automatically creates that folder if it doesn’t exist? Thank you

hi there, i just purchased your pluggin its already runnign on the front end but im having problems to catch it on the server side with a JAVA servlet, im using this code on the html but I’m getting the parameters thumb and data null

<form action=”Actores” Method=”Post” enctype=”multipart/form-data”> <input type=”file” name=”thumb” /> </form>

can you help me out please? am I missing some parameter?

sorry thats not the correct code im using <form action=”Actores” Method=”Post” enctype=”multipart/form-data”> <input type=”file” name=”thumb” /> </form>

Whats the name of the parameter that has the base64 file? Ive tried thumb_values, data and thumb, all 3 are null

forget it I found the parameter, you should put it on the documentation, the parameter on the request is thumb_values

Plz can some help me

i can’t save croped imagen, just the original with “this.imageGhost0.currentSrc”

plz i need help

huawhauwauwh best suport ever!!!

Hi, I have purchased your product but I am confused regarding using the modal form to show the image and writing the filename of the image saved to a database table.

I can get the form to work OK but what else do I need to get the filename after a successful file upload?



what a have to do for get de croped imagen and save in a var?


dtynan Purchased

I am using canvas and I have existing server-side images that I am displaying with data-image. When I do that, I see the little red trash can as the only icon on the image. If I use editstart then instead of the red trash can, I see the zoomin/reset/zoomout/cancel/save buttons, as expected. What I want to do .. if it’s possible or else as a feature request .. is to display the server-side image with the little red trash can and also the edit button. Pressing the edit button would display the zoomin/reset/zoomout/cancel/save buttons. In other words, I want to start with the buttons that you end up with after you do an edit and a save (the “final” buttons where you see edit & trash). Our users are mostly older and unsophisticated and I think it will be less confusing for them to see an edit button and a trash button on their existing image when the page first displays. Is that possible or might it get added as a feature?

Hi Dtynan,

In order to do this, there must be alot more stored on the server, because we only display the “final” image. We have no knowledge anymore of all the edits that took place before.

Maybe i miss understood your question and you only want the buttons?

Let me know.




dtynan Purchased

Thanks for the reply! Let me try to be clearer…

I have the user’s image on the server already. I display it to him with data-image=whatever.

OPTION A ) He sees the image and it only has the little red trash can icon (if I don’t do editstart).

OPTION B ) He sees the zoomin/reset/zoomout/cancel/save (if I do editstart).

Rather than either of those two scenarios what I want him to see is the edit button (data-button-edit) and the red trash can. Then, pressing the edit button would show the zoomin/reset/zoomout/cancel/save. Is that possible?


dtynan Purchased

In other words, I want to start with this look: When the user clicks the pencil icon, he gets:

This is my code:
<div class="dropzone" data-width="200" data-height="300" data-resize="false" data-editstart="true" data-image="/finsecurity/photos/dragon.jpg" data-url="/finsecurity/canvas.php" style="width: 100%;" />

I just want editstart (or some similar option) to show the pencil icon initially… Can that be done?

Hi, is there a way to rotate de image? when you took a picture with a mobile device it apears rotated. a rotate button can help

This comment is currently being reviewed.

No, this plugin is not the same nor has it any relatence to it.

Hi I have feedback about your plugin

It has an issue when you use iPhone and Take a Photo and you click Save. The canvas is rotated to the left, it’s the issue, I think you need to check EXIF orientation.

I can’t fix that issue. Please help me check this


I’m an ASP.NET coder and bought this many, many months ago, not realizing that it was PHP dependent and would be useless to me. I gave getting it to work a try, but nothing, but was worn out mentally by the effort. I became determined to improve my site a week ago, and after several months, and having learned just a tad bit more, I was able to work out a solution.

My problem with the original was that it would save the updated image to the file system on my development machine, but not when uploaded to my hosted site.

I successfully worked on custom solution and then thought to try the solution with this application, and it worked beautifully. I simply replaced [canvas.php] with a ASP.NET Generic Handler—Canvas.ashx. The code follows. It’s not super clean, but works super well. I hope it helps, as this was a months long ordeal for me. I still have to figure out how to save the cropped image to a database, however. NOTE: the tilde was removed before the ”/” and should appear as ”~ /Subfolder”

<%@ WebHandler Language=”VB” Class=”Canvas” %>

Imports System Imports System.Web Imports System.Net Imports System.Net.WebRequestMethods.Http Imports System.IO Imports System.Web.Script.Serialization

Public Class Canvas : Implements IHttpHandler

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    context.Response.ContentType = "application/json" 
Dim strimageData As String = context.Request.Form(0).ToString
Dim strFileName As String = context.Request.Form(1).ToString
Dim imageData As Byte() = Convert.FromBase64String(strimageData.Split(",")(1))
Dim savepath As String = "" 
Dim tempPath As String = "" 
tempPath = "~ /Subfolder/tmp/" 
savepath = context.Server.MapPath(tempPath)
Dim urldata As String = context.Server.MapPath("~ /Subfolder/tmp/")
Using stream As New FileStream(savepath & strFilename, FileMode.Create)
    stream.Write(imageData, 0, imageData.Length)
End Using
Dim jsonSerializer = New JavaScriptSerializer()
context.Response.Write(jsonSerializer.Serialize(New With { _
    Key .status = "success", _
    Key .url = urldata, _
    Key .filename = strFileName _
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Return False
    End Get
End Property

End Class