Access-Control-Allow-Origin error when trying to use cropper js

Asked Feb 15 '18 at 13:34

Active Feb 15 '18 at 13:34

Viewed 18 times

I'm trying to use cropper js to crop a image from url

but it is returning a 'Access-Control-Allow-Origin' error

var $img = $('<img/>');

$img.attr({src: src}).load(function () {
    $container.html($img);
    $container.css({maxWidth: 100});
    $container.css({maxHeight: 100});
    $img.cropper({
        cropBoxResizable: false,
        aspectRatio: 100 / 100,
        minCropBoxWidth: 100,
        minCropBoxHeight: 100,
        dragMode: 'move',
        fillColor: '#fff',
        crop: function (e) {
            $('.coords').val(e.x + ',' + e.y + ',' + e.width + ',' + e.height);
        }
    });
});

asked Feb 15 '18 at 13:34

SpaceDogCS

2,808
3
20
49

It probably relies on a ` – Pointy Feb 15 '18 at 13:36
you trie use: img.crossOrigin = "Anonymous"; ? – toto Feb 15 '18 at 15:07
@Pointy I'll try – SpaceDogCS Feb 15 '18 at 15:09
@toto yes, and no success :( – SpaceDogCS Feb 15 '18 at 15:09
I beelive that the problem is with the crop js that use canvas. I will send you and example soon. – toto Feb 15 '18 at 15:29
some observation the line $container.html($img); change to $img.appendTo($container); this is object not a html. – toto Feb 15 '18 at 15:53
I tested it, the img load fine from remote src, the problem is that the croop plugin use canvas and tried convert the image to base64 using toDataURL and it failed for security reason crossdomain. 1 soluctions: create a php or aspx or jsp server page that download the image and resent the binary to image object. for image side is local image. – toto Feb 15 '18 at 16:56
@toto is that what I was in mind – SpaceDogCS Feb 16 '18 at 10:45
but I found this website https://cors-anywhere.herokuapp.com/ – SpaceDogCS Feb 16 '18 at 10:45

Access-Control-Allow-Origin error when trying to use cropper js

0 Answers0