shpontex / cropme Goto Github PK

I'm looking through examples and they have a cropme.on("crop:stop"...) event. Was that removed? I'd like to be able to get at the position whenever it changes - is that possible now?

While dragging the image in the crop area, there seems to be a trail. This wasn't an issue last week, I'm not sure what's changed. It also applies to the demo.

• Windows 10, Chrome lastest build, JQuery & Bootstrap.

I tried to use this plugin but its not working.

I get below error in browser console:
cropme.min.js:10 Uncaught Error: the argument must be an object or a string

$('#cropme_img').cropme('destroy'); is not working

Works in Chrome and Firefox and even IE Edge dev version on mac. I double checked the demo as well in edge and same result I get in my site no output returned from crop method and results in empty.

Edit: added more details

The crop() output seems to default the base64 image to 96dpi. I can't seem to find anything in the js file to adjust the resolution. We need to output image at 300dpi to meet the requirements.
Could you point me in the right direction on how to address this issue?

After attempting to call .crop() on the CropMe instance an error occurs, cropme does not return the res object, I've rolled back the server version to v1.3.4.

When setting zoom to enabled (default) but slider disabled (default) the zoom is breaking on mobile pinch/zoom.

It can easily be recreated by adjusting the settings on the demo to the above and testing on a mobile device.

https://shpontex.github.io/cropme/

[Error] TypeError: undefined is not an object (evaluating 'self.properties.slider.value = touches_dist / self.properties.od')

line 405 cropme.js:

self.properties.scale = self.properties.slider.value = touches_dist / self.properties.od;

Hi,

I don't know if you can fix this, but the MouseWheel feature not working on Firefox. it's ok on Chrome, IE and Safari.

Thanks for your good work

Firstly I uploaded an Image and when it finally uploaded on server, I destroyed the current cropme instance, so when next time I upload new image there would be new instance created.
But when I destroy the current cropme instance and after that tried to resize the current screen (I tried dragging the element inspector) but getting error in that case and the error is like:

cropme.js:1023 Uncaught TypeError: Cannot read properties of undefined (reading 'container')
at Cropme.resize

What is the license of this project?
thank you. great work

My cropme works perfectly in desktop, but in mobile I try to zoom it just fires the rotation event. Maybe I miss some steps or plugins. Please help, thank you.

The crop method uses canvas.toBlob which allows for setting the mime to e.g. png, jpg or webp and if jpg or webp allows for setting the compression quality. It would be great if these were configuration options and could be set dynamically as well.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

canvas.toBlob(callback, mimeType, qualityArgument);

Good morning all,

I just found a little bug it seems to me. I'm on the latest version of Google Chrome, but it does the same with Safari. When initializing the cropme the image id is deleted from the DOM. You have to go through another jQuery selector for this to work.

myImage = $ ('. cropme-container> img'). cropme ();

When using Content Security Policy Header, the browser generates a page error into the console, because the script is using either eval(), new Function(), setTimeout([string], ...) or setInterval([string], ...) for evaluating strings.

As CSP is a common thing to use and unsafe-eval usually should not be enabled, I´d consider this a bug.

when I crop an image for first time it work great. (after cropping i would destroy the cropme. )
but when I want to crop second image i would get this error

app.js?id=79f598946b8ba4ad1fb4:12442 Uncaught TypeError: Cannot read property 'viewport' of undefined
    at Cropme.createCanvas (app.js?id=79f598946b8ba4ad1fb4:12442)
    at Cropme.crop (app.js?id=79f598946b8ba4ad1fb4:12664)
    at jQuery.fn.init.jQuery.fn.cropme (app.js?id=79f598946b8ba4ad1fb4:12088)
    at HTMLButtonElement.<anonymous> (app.js?id=79f598946b8ba4ad1fb4:10234)
    at HTMLDocument.dispatch (app.js?id=79f598946b8ba4ad1fb4:20741)
    at HTMLDocument.elemData.handle (app.js?id=79f598946b8ba4ad1fb4:20545)

this is my script:

cropImage = (item) => {
    var myImage = $(item).cropme({

        "viewport": {
            "width": 200,
            "height": 200,
            "type": "circle",
            "border": {
                "width": 2,
                "enable": true,
                "color": "#fff"
            }
        },
        "zoom": {
            "enable": true,
            "mouseWheel": true,
            "slider": true
        },
        "rotation": {
            "slider": true,
            "enable": true,
            "position": "left"
        },
        "transformOrigin": "image"
    });
    var rotate = 0;
    $(document).on('click', '.rotate', function () {
        rotate = rotate + 90;
        console.log(rotate);
        myImage.cropme('rotate', rotate);
    });
    $(document).on('click', '.crop', function () {
        let resultImage = $(this).data('target');
        console.log('myImage', myImage);

        myImage.cropme('crop', {
            type: 'base64',
            width: 200
        }).then(function (output) {
            $(resultImage).attr('src', output);
            $('.base65-holder').val(output);
            setTimeout(function () {
                myImage.cropme('destroy');
            }, 200);
            $('.js--delete-user-photo').removeClass('invisible');
            $('.crop').addClass('invisible');
        });
    })
}

// I call the function after uploading the image:
reader.onload = function (e) {
  $(result).append('<img id="uploaded-photo" src='+e.target.result+' height="100">');
  if(resizable){
	  cropImage('#uploaded-photo');
  }
};

Thank you for making such a great project, is there any way where I can crop multiple areas and download, any code snippets?

Hi,

Is there a way to use the position data to generate the crop image inside an backend? I've tried it with PHP & Imagick but could not get the same result. Maybe its the order in which I need to apply the details (scale, rotate, crop)?

Can you provide some info on that?

Good morning all,

I just found a little bug it seems to me. When I make a crop of an image taken directly from the camera of my iPhone it is well oriented when selecting the area to keep (before the crop). But once the crop made, the base64 image is sent rotated by 90 °.

This works on iPhone if you use a downloaded photo for example, but it poses a problem if the photo was taken with the camera of the iPhone, either directly from the camera, or from the photo library with a photo that was taken with the camera.

It works correctly on Android devices with file sent or from the camera directly.

Do you have an idea or a lead to correct this problem please?

Hi there, first off all, your plugin is everything I am looking for, great work!
Sadly I cannot get the crop() function to work in pure javascript.

So far I have:
var element = document.querySelector('.crop-image');
var crp = new Cropme(element, {
...
});

var crop_btn = document.querySelector('.js-crop');
crop_btn.addEventListener('click',
crp.cropme('crop', {
type: 'base64',
width: 800
}).then(function(output) {
// here you can use the base64 output
});;
});

As soon as I hit the button, I get an error "e.cropme() is not a function". Could you please point me into the right direction?

Thanks in advance!

I notice that this library hijacks the native Promise object and adds a wrapper over it. Can this be avoided, or is there a way or a config option to opt out of it?

HTML:
<img src="/img/photo.jpg" id="avatar" />

JS:
var avatar = $('#avatar').cropme();

How i can to set scale, x, y on page load ?

when crop , there is no response , no error message on ios 13.5 (cordova wkwebview)
works on desktop chrome & mobile safari

Cropme123.crop({
width: 300
}).then(function(output) {
// here you can use the blob output
$("#img_cropped").attr("src",output) ;
$("#img_cropped").show() ;
//$("#img_001").hide() ;
$("#container").hide() ;

	   $("#img_cancel").show() ;
	   $("#btn_crop_pic").hide() ;
	    $("#img_zoom").hide() ;
  });