545 comments found.
How can I get the base64 data of the cropped image? Thanks
Hi, can you clarify what you are trying to do? the base64 after clicking a button or?!
1 – drop the image on the box 2 – click on btn-ok 3 – get the the base64 of the cropped image instead save image to server. I need a Jquery / javascript solution to append the base64 data to an element of dom.
I’m using your script to handle the upload of a logo in a woocommerce product ( a customizable tshirt ). All works fine but I need to avoid wasting space on server, so the goal is save the image only when the product is add to cart. Otherwise a user can upload unlimited logos.
There’s a way also to limit the upload only to jpg images and set a max file size?
Thanks!
p.s. I need to append the image before saving becouse, after click on btn-ok, the image is appended to the tshirt as a preview
This can’t be done at the moment, i need to at a method that fires instead of “save” with your own personal function… let me get back to you with that, will be easy to make (5 min).
Hey, send me a pm with your email, made a new option called data-save = “false”, then there is a new function onSave where you can put your own function, the first argument contains all the info (including base64)
GOLDEN!!! I send you my mail now, by the form on your page http://codecanyon.net/user/stbeets thanks!
Hi, you can also download the latest version from codecanyon, the update got approved!
Hi stbeets,
I have bought this script almost 3 months ago, and I quite like it. The reason why I still haven’t implemented is because I cannot find a solution for the Laravel framework… I have implemented a controller that I’ve tested on another form, that does post with redirect+page refresh and it works, but unfortunately when I implemented the same route/controller with the script, it keeps giving me an error – undefined.
Please, an advice would be great on this one. Thanks in advance,
I have a good controller with a php logic, I have found the origin of my problem.
message: “Call to a member function move() on a non-object” type: “Symfony\Component\Debug\Exception\FatalErrorException”
It appears, that the form is not passing the input, e.g. the image in this case.
here’s my html:
<input type=”file” id=”file” name=”file” />
When I click the green button to save, instead of saving it, and display delete or edit, it brings me back the editor buttons.
onAfterProcessImage: function() { $(’#filename’).val($(this.element).data(‘name’)); console.log(“filename”, $(this.element).data(‘name’)); },
I am getting an undefined.
Hi, does your $(’#filename’) exists?
Check the demo “codecanyon.stbeets.nl” it works… You have a demo url where i can check your code?
Yes I added it under the dropzone div. Also is it possible to access the cropped file and not the base64?
you could add this in the response and access the response variable
Is there a list of current variables available with descriptions?
You can get the name, height, width, etc from it, what are you trying to accomplish?
Great Script…
I have 2 questions.
I would like to be able to rotate the original image and on small image size requirements I would like to put the tools outside the dropzone.
Thanks, Scott
.small .tools { top: -30px; }
This will move the tools outside the dropzone and above the plugin.
Greetz Sander
That is pretty much what I ended up doing. Thanks for the reply.
How much would you charge to get the rotation done faster?
Hi Scott, at this moment, i am overloaded with work, so i am sorry to report that the functionality isn’t being made in a short period. I hope to be working on this at the beginning of april.
Hi ,great plugin! There’s a way to force “resize” the image width to fit the bounds ? I need this by default, and let the user only to drag up and down, without change the zoom.
Also I need to append the cropped image in another div with a jQuery function, without refresh the page, how can I get the base64 data of the cropped image onAfterProcessImage?
And last ( sorry) how can I get in canvas.php an additional variable set in the data object?
Thanks!
Ok, I have figured out the second question with
$('.dropzone').html5imageupload({
onAfterProcessImage: function() {
imgUrl = $(this.element).data('name');
$('#mydiv').append('
');
}
});But I have to add my domain url to the script, there’s a way to get the same url of the cropped image written to the server by canvas.php?
Thanks
It should no be needed to add your domain, only when you are not using the script on the same server.
I’m getting an error when turning on data-editstart and trying to save the crop. Here’s my div and error:
<input type=”file” name=”thumb”/>Error: Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
html5imageupload.js:491
imageObj.onload
Hi, this is because you use a image that is not on your server?! If i google the error, i see all solutions about cross side sources. It’s not possible it import an image that is not on your server. The canvas is protected and the other server must have Access-Control-Allow-Origin in the header.
Hi,
Is there anyway i can get the cropped image in base64 encoded string without sending to server for uploading?
i have an existing web method (ASP.NET) which takes in the base64 encoded string and save as a image file.
I wish to use the existing method. Please help.
Regards, Kerry
Hi i managed to write another method to save the image and now i am having another issue.
i want to redirect user to another page after the image is successfully uploaded.
but i can’t get the onAfterProcessImage callback function to trigger.
Please help.
Kerry
Hi Kerry, do you have a demo url where i can see your plugin and js?
Here is the URL.
http://www.kerrydev.com/fb_caishen/Step3b_mobileupload.aspxThe image is cropped and uploaded in the server without any errors. browser console doesn’t show any errors too.
Hey, i looked at your site, but i couldn’t find an error and i dont see your afterProcessImage function…
Hi,
Sorry last night i was working on that file. i have created another demo for this. here is the url
http://kerrydev.com/FB_Caishen/demo.aspxHi, finally i managed to find out the issue. the onAfterProcessImage callback function is working.
Great to hear! Any other thing i can assist you on?!
i like your plugin as it works in mobile devices. so now i am trying to find some workaround to achieve my objectives.
My objectives is to allow user to adjust the uploaded image so that their face fits within the frame.
You can refer to this url for reference. https://www.kerrydev.com/ImageResizeCropCanvas/index.htmlin the above url, there is a background image which i added to a css class = overlay
once user has adjusted their image and i will crop and merge with a few other images.
this is the final image produced. https://www.kerrydev.com/10152604163747011_20012015213614.pngis there any way that i can add additional divs on top of the uploaded image and user is still able to adjust/zoom?
Hi,
I really need the rotation feature ASAP.
I’m happy to pay for this to be done otherwise, contact me direct if you are able to do this.
Thanks, Jamie
Hi Jamie,
What are you looking for in the rotation function? Could you please elaborate? I can develop this for you ASAP. Please PM me for needs for this function and i will give you an estimate for the needed hours and my rate. ASAP will be between friday and sunday (sorry, day job gets in the way atm).
Regards,
Sander
Hi,
before making a purchase, I have a question: is it possible to dynamically change the height of the dropzone after the image has been dropped?
Cheers!
Hi Arturnowak,
at this point this is not possible, but it will be in the future (hopefully released in januari). Keep following me to see the updates!
Regards,
Sander
Hello,
I found your plugin today while searching for an HTML upload solution and it looks great. One thing i did not see in the demo was if your plugin will handle multiple images at once. Or how this can be implemented into a form with multiple images that can be uploaded within 1 form. I would be using this script within a photo gallery site that i use and will be uploading 1 to 100 photos at once. Being able to drag in multiple photos or a folder into the drop area would really help.
Also, on the demo I was uploading full sized, high-res images from my camera. Your script displays them at full size after I drag the file in. Though that is not a bad starting place for the “zoom” of the image, when you try to zoom out (the 2 arrows facing inwards/at each other) it takes hundreds and hundreds of clicks for it the large photo to shrink to something that would actually fit in the box. Though I can resize the photos before uploading, that may add a lot of time when working with many photos.
I really like your work. Keep it up.
Hi Carabs,
Thanks for you extended feedback and kind words! I am working on an update where multiple uploads are possible. About the large image, i will maybe install a button to “resize” the image to fit the bounds.
Keep following me for updates!
Thanks
Hello i just bought this plugin but i can get it, where is the drag and drop i only see de upload button. please help
i just have a html with no css and does nothing!!
do you have an url for me so i can take a look?
I am using the form layout and can see the data-width=”960” and data-height=”540” are set in the form.
Different images in my website are different sizes. How do you recommend is the best option of specifying the different heights and widths. Maybe input boxes? maybe via a passed variable.
What has been done previously?
no not yet, i am making an update (end of january) where this can be done dynamicly in the plugin
HI,
Great script.
I have setup a local copy of the downloaded script. However it places a blank file in the tmp directory. The file is named correctly, but the file is zero bytes. So no image to display on the form.php page
What is the response in $_POST? Did you debug that?
I have re-installed and all is now working fine.
Thanks for the help.
Hi, sorry my English. I’m having a problem. HTML5 Upload Image: The ratio of all sizes (CSS and image) are not the same… In – http://www.ruralclassificados.com/teste/ How do I fix it. Outra questão, como pegar a imagem recortada via post em $_FILES?
Obs. System Wordpress
Hi, i dont understand your question, i am sorry. If i look at your site, the plugin works…?! What ratio is not the same? Also, your question in portugees, why would you want to replace the cropped images? Maybe you can explain what it is you are trying to accomplish, so i know what direction you are going.
Sorry the question in Portuguese. As the ratio, it is because I was with another resolution in browser.
Another question, how to catch the cropped image via post in $ _FILES I did not much logic in the form.php I want to know if after crop the image I could spend the image directly via post, because I work with wordpress and when I insert an image worked beauty with media_handle_upload function (‘file’, $ post_id);
// These files need to be included as dependencies when on the front end.
require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
// Let WordPress handle the upload.
// Remember, 'my_image_upload' is the name of our file input in our form above.
$attachment_id1 = media_handle_upload( 'file', $post_id );
//Get URL the image
$url1 = wp_get_attachment_url( $attachment_id1 );
//Update Custom Post Field
update_post_meta($post_id, 'wpcf-file', $url1);
Hi, i just finished the wordpress plguin, which hopefully will be approved soon here on envato. In the $_FILES is not used, because i crop the image before it is send to the server, so it is stored in $_POST[‘data’]
This is what i use in wordpress
$tmp = explode(’,’,$_POST‘image’); $imgdata = base64_decode($tmp1); // Use the WordPress API to upload the file $upload = wp_upload_bits($filename, null, $imgdata);
if(isset($upload[‘error’]) && $upload[‘error’] != 0) { wp_die(‘There was an error uploading your file. The error is: ’ . $upload[‘error’]); }
//ADD TO MEDIA LIBRARY $url = trailingslashit($upload[‘url’]) . $filename; $result = media_sideload_image($url, $postId, $filename );
Wondering how you got on integrating this fine code with Wordpress? I noticed a comment where a guy was asking about that.. and then you took the conversation to email.
Still working on it, ill hope to finish it today, the first version of the plugin… still trying to embed it with featured image and other stuff…
Im running .net IIS and this product does not work. Im not a php developer and wished it was stated more clearly in your product description. How do I get a refund on your app?
Hi, the PHP files are only an example on what to do with the backend, you could write it to ASP.net if you want (just debug the POST variables and you will see what i send to the backend). If you really want your money back, please contact Envato, i cannot return any from my account / dashboard, this is done by envato. I am sorry for the inconvenience…
Dear Developer,
we bought your “HTML 5 Upload Image, Ratio with Drag and Drop” script in http://codecanyon.net/ , but your script 1.4.2 version haven’t had “Smaller” function. Where can we find your last beta script version?
Best Regards
hi, what do you mean with smaller function?
Hello, could you check on http://codecanyon.stbeets.nl/#server. Smaller (Beta) version’s function is good for us. How can We use it without modify anything on your codes.
Hi, the smaller functionality is still in beta… i can send you the new files, so you can have a go with it, but an error may occur sometimes… still debugging / building this… Send me a mail at info[at]stbeets.nl and i will mail you the latests scripts.
hi again, i want to translate all scrip message and need a simple l10n
how can i do this and do you have a internal i18n ?
thank you.
hi, there is no i18n script. You can change everything in the top of the JS file and in the CSS file. Adding this as a addition for futher releases
hi, in your demo file i have this error message in all boxs
“HTML5 Upload Image: The ratio of all sizes (CSS and image) are not the same…”
and html file is different with your site demo !
can you provide a demo url so i can take a look?
hi, just found a bug when running the code in mobile, not sure if my library is outdated. Anyway, my founding is as follow:
before:
imageUnhandle: function() {
var _self = this;
var image = _self.image;
$(image).unbind('mousemove');
if (_self.options.onAfterMoveImage) _self.options.onAfterMoveImage.call(_self);
},after:
imageUnhandle: function() {
var _self = this;
var image = _self.image;
$(image).unbind('mousemove touchmove');
if (_self.options.onAfterMoveImage) _self.options.onAfterMoveImage.call(_self);
},
