andyvr / picedit Goto Github PK

Original code:

 function build_img_from_file(files) {
            if (!files && !files.length) return;
            var file = files[0];
            if (!_this._filename) {
                _this._filename = file.name;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                _this._create_image_with_datasrc(e.target.result, false, file);
            };
            reader.readAsDataURL(file);
        }

With fix:

        function build_img_from_file(files) {
            if (!files && !files.length) return;
            var file = files[0];
            // assign actual name
            _this._filename = file.name;

            var reader = new FileReader();
            reader.onload = function (e) {
                _this._create_image_with_datasrc(e.target.result, false, file);
            };
            reader.readAsDataURL(file);
        }

Hi, is there some way to extend this library(ie. add error handler to current formSubmitted option)?

Hello, very usefull, great job (sorry for my english)

So, your live demo run on firefox (last version) but not in my server or local test....nothing image display (clipboard or upload manually...same way), canvas box stay empty , any idea ?

But work like a charm on google chrome....

Thanks

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

How do I pass the variables to the out.php file?

is there possible to customize the template.
i look forward to change any text in template to cater for i18n issue.

I am calling the plugin wrappers 'destory' but it is not removing everything.

I am reusing your PicEdit to upload one or more images, reusing the PicEdit by first calling destroy and then removing all the html added after the input tag, and unhiding it.

Is there a better way to blank the image that has been uploaded to the backend ?

$img_file is not defined ? on server side code - out.php

Copy/paste an image from FF to picedit (in another tab in FF) doesnt work (on ubuntu).
At first I expected it to be some FF bug (because it is ok in Chromium), but it turns out that it is possible, according to this http://jsfiddle.net/KJW4E/361/

When default image is provided, and the user chooses not to change the image, i get the following error

Pretty irritating.

If you're not going to fix it, maybe you could take a pull request from me? i'll take a crack at it out of pure necessity.

Hey , Guys

I love this plugin , it is great tool. I m implementing a new layout accordingly based on this plugin but , i have 5 image box which that user need to select and upload at least to some temp folder when upload button / submit is clicked , later i need that image to be previewd when upload is done and dialog is finsihed , in same manner edit and delete should work also .

am confised with your server side code . (outphp)

Thanks ?

I tried to give the canvas a fixed size, but it seems the images are aligned at the top of the canvas. Is it possible to center the image in the canvas and give the canvas a fixed aspect ratio to crop the image with?

Is it possible to use PicEdit in asp.net? Because I am not able to get the image i have just edited

Is it possible to upload more than one image in the same form?

I have forms with more than one input file and your plugin could be just what I need. It works perfect with one input file, but I have failed to make it work if i submit the form with more than one image at a time.

Thanks a lot for your time!

Indix

I would like to know what should I do so as to enable a 1/1 crop ration and resize the image before saving the image. Is there an option to do that in the plugin?

When I upload a file it first gives message 'waiting' , then for a very short moment '1% uploading' and then it is ready.
I'd like to see an image (rotating) or progress bar. I had a brief look at the code and there is something like that in there, so I wonder if it is a bug or not.

Hi,
First of all thanks for the eyecandy image uploder with cropper, resizer, rotater etc. It's very useful.
But i felt it will be very helpful if we implement the message box to float out of the canvas so that it will be very visible and the buttons should be lightly overlayed with black. Also the cropping border should also be overlayed. Its not visible sometimes for some images with more colors.
Once again thanks for writing this wounderful plugin.

If we set defaultImage and don't use default loading of images then picedit_colors elements don't work in Chrome. The problem is that image refreshing permanently so the draw event does not work. The solution of this problem is the changing of condition, which is in _create_image_with_datasrc, from if(dataurl) on if(dataurl && !img)

It is not possible to upload a TIFF file in image cropper.

Hey thanks for the great tool! How and where can I change the script to only submit the edited file not the original to the server? Thanks a lot!

Hi. I really like this plugin. Is there any way we can make it mobile responsive? I'm trying to dig into the code to find it but the dimensions of the canvas seem to be hardcoded. Can I get help with this?

I have a problem with edited image(s), the original image is still being saved while drag and drop image are not save (blank file). Same applies to images from web cam.

I am using Spring MVC and browse and upload is working fine. Only the edited image are not saving as well as the drag and drop image (and WebCam).

Is there any way I can set the input[type=file] value to the drag and drop image or update the selected image with the edited (cropped, resized, rotated, etc) image?

I am thinking that I am missing something in the front-end that is why I am having issues with saving the image.

Thanks.

BTW, below is the scriplet in my controller.

For drag and drop, file is always empty.

@RequestMapping(value = "/uploadProfileImage", method = RequestMethod.POST)
public @ResponseBody String uploadProfileImage(@RequestParam("image") MultipartFile image) {

    if (!image.isEmpty()) {
       //Saving code here
    }
    else {
        //File is empty
    }
}

line:424
img.src = canvas.toDataURL('image/png');

I've added your picedit.min.css and picedit.min.js files to my form...

`

I've added the necessary input element to my form...
@Html.TextBox("image", null, new { @type="file", @id = "image"})

And I've applied the picEdit plugin to the appropriate input...
<script> $(function () { $('#image').picEdit({ formSubmitted: function (response) { $("#@Model.EditorName").modal('hide'); $("#@Model.ReloadRegion").html(response.response); } }); }); </script>

When I invoke my form, I see the plug-in in action. However, the rotate image and pen image tools (both invoke a "sub-menu" of sorts) are broken in that the sub-menu they invoke doesn't appear correctly. The pointer (little up-arrow on the sub-menu) points to the resize button, and the sub-menu itself is empty.

I've tried both the minified and regular version of both the .css and .js files. Any idea what might be going wrong?

I believe there is an issue with "defaultImage" option of picEdit plugin.
You can add an URL (from the same server to prevent CORS issues) to the defaultImage option such as:

defaultImage: "my/custom/same/server/url"

However, I found performance troubles using it like that.
It seems that a part of the _create_image_with_datasrc JS function from the plugin code is executed infinite times. Specifically the img.onload function (line 421 of the picEdit.js file).

In order to solve the problem, I changed lines 421-437 (surrounding the img.onload function) on my own picEdit JS file with the following code:

$(img).one("load", function() {
    if(dataurl) {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        img.src = canvas.toDataURL('image/png');
    }
    _this._image = img;
    _this._resizeViewport();
    _this._paintCanvas();
    _this.options.imageUpdated(_this._image);
    _this._mainbuttons.removeClass("active");
    if(callback && typeof(callback) == "function") callback();
});

The solution above using jQuery solves the issue: the onload function is only called once for the defaultImage URL. When you change the image by interface, the _create_image_with_datasrc function is called again.

Now I don't have any performance problem.
In any case, I wanted to share it because maybe this is an error from the picEdit plugin.

Hello,

This is a great plugin. But, cropping doesn't work anymore in Chrome Version 48 (with no error message). I can confirm it was working on earlier versions. You can check on your own demo: http://andyvr.github.io/picEdit/

Anyway to solve this problem.
Thanks,

Walter

Hi,

i found out about this tool today and added in one of my projects. My problem is, that although i can modify the picture, he always submits the original image. He is not taking any of the changes. Here ist my code:

     $("#image").picEdit({
             redirectUrl: baseURL + "/userinfo",
         defaultImage: false
     });

<form method="POST" enctype="multipart/form-data" action="user/addimage">
<input id="image" accept="image/*" type="file" name="userimage">
<button type="submit" class="btn btn-primary btn-lg"><spring:message code="common.submit.save"/></button>
</form>

What am i doing wrong? Is it not working with multipart/form-data or something like that?

I can't understand how can i get the input value. And how can send image to image directory.

Hi

i want to print conformation message on page after image submit successfully using picEdit
controll how can i do this

Hi

i am using picEdit - Perform image rotations, cropping, resizing and pen tool when i m try to was other input at at time save is not pass in server only image is pass.

i am add 3 input fied that vale is not pass in server

I request some one please can you guide some one... i have downloaded zip from site and extract in xampp but it's not uploading images.. i am missing anything plz can you guide some one..

How do we reset the control after an upload is complete. The image stays in the background.

Hello and thank you for this wonderfull plugin.

When i set a defaultImage and change it to another pic, i became following error after submit:

Uncaught TypeError: Cannot read property 'size' of undefined
request.onprogress @ picedit.js:701

In picedit.js line ~701 is the following code:

var request = new XMLHttpRequest();
request.onprogress = function(e) {
    if(e.lengthComputable) var total = e.total;
    else var total = Math.ceil(inputblob.size * 1.3);       //affected line 701
    var progress = Math.ceil(((e.loaded)/total)*100);
    if (progress > 100) progress = 100;
    _this.set_messagebox("Please Wait... Uploading... " + progress + "% Uploaded.", false, false);
};

the variable inputblob is set some lines above this

var inputblob = _this._dataURItoBlob(_this._image.src);

here is my code to call picEdit()

$(function() {
    $('#InfoFoto').picEdit({
        defaultImage: "images/restaurant/1/info/slider_1_1448399597.jpeg",
        maxWidth: "600",
        formSubmitted: function(response){
            $.get('pages/contentSlider.php?type=restaurantSlider&store=1', function (response) {                        
                var source = $('<div>' + response + '</div>');                        
                table = source.find('#infoDataTable');
                $("#infoDataTable").html(table);
            });
        }
    });
});

i wonder why inputblob is not defined and hope someone has any idea or a solution to fix this?

P.S.
I have changed all toDataURL("image/png") to toDataURL("image/jpeg"). Is it possible, that this cause a problem with _this._image.src?

I tested on latest updated version of Chrome and FireFox. Edit is not working.

I tried this on Max OSX Chrome and on Android 4.4 Chrome, and both got the same result.

I'd really love to try this out for a project but is this the default case when trying to use the camera?

Hi guys, thanks for the great work done here!

I'm been using picEdit on a personal project and I noticed that while it works for the majority of the pictures I try to upload, it seems to fail for images that are beyond a certain threshold. I can't tell if the images that fail are simply too large (and I can't see a maxFileSize parameter), or if the dimensions is what's causing the problem. When I run into that, the image simply isn't uploaded despite the "data successfully submitted" response. Any thoughts on this?

Hey (:
I am not able to get the Source Path for the FTP UPload from your demo project?
Would be nice if you can answer (:

Hi,

Thanks for the nice plugin.
I felt it would be helpful if it has an option to undo/redo the changes.
One more thing i want is to draw any shap(rectangle/circle) over image to block out some image area.

Can you please suggest regarding this. How can I achieve this.

Any help would appriciate.
Thanks!

Hi i am use this code but when i m upload image at a time image same in two format 1 jpg 2 jpeg how can i solve this issue

I have changed request.onprogress in the _formsubmit to give a working progress user comfort.

                //send request
                var request = new XMLHttpRequest();
                request.upload.onprogress = function (e) {
                    if(e.lengthComputable) var total = e.total;
                    else var total = Math.ceil(inputblob.size * 1.3);
                    var progress = Math.ceil(((e.loaded)/total)*100);
                    if (progress > 100) progress = 100;
                    _this.set_messagebox("Please Wait... Uploading... " + progress + "% Uploaded.", false, false);
                };

Sorry, I don't yet know how to use github!

I try pigEdit in my website, everything is ok except after post to ActionResult, it can not be RedirecToAction to other ActionResult
When i change the pigEdit to commont file, it is ok

Looking at the .js file, I saw that there are many preventDefault, I think that is the cause of this issue, but I have no idea how to fix.

Thanks

how can you edit an already loaded image from a img tag - and manipulate using picedit ?
I have this UI.

I have integrated picEdit for all when + is clicked - which ine great achivemnt, The only thing is how to edit them when the edit icon - pencile is clicked. I thouhg the idea simple - becuse i suppose to find the img tag - get its src and load into picedit img -src - but i could find the PICedits - image tag - even if i run

docuemnt.getElemetsByTagName('img');

i have also tried the defualt image as follow -

default:window.img_src ; // http://localhost/madebyus4u/uploads/no-photo.jpg

instead of fade in on hover make the editor toolbar persistent across the top border , and the accept / cancel option in the bottom border , that way the controls are always visible , right now white images are making the controls hard to find , also please add a refresh button , thanks for the great plugin 👍

Hopefully this will be doable with the current version... I need to specify a fixed ratio for the cropper. Can it be done?

Hello I am using this code with codeIgniter but it's not working, please can you guide. where it will upload.

please can you guide....

Hello,

I've been trying to incorporate this code into a website I'm working on.  I'm not sure if I've encountered a bug or if I'm doing something wrong though.  I've been able to incorporate the files fine and I can select a image from my computer.  If I submit the page at that point, everything seems to work as expected.

However, if I select and file and then rotate it say counter clockwise, the image is not sent to the server.  I've done a print_r on the $_FILES array to see what is posted and the array is completely empty.  In the case where I don't modify the image above, I do see the original and new image in the $_FILES array.

In terms of my environment, I'm using PHP and IE11.

Thanks!

Neal

Can a dataurl be used as defaultImage and be set runtime?