图像裁剪器不使用外部图像

Question

I am using this image cropper, which is working fine as long as the images I load are actually located in the site map structure itself.

However, what I'm trying to do is crop images that are located on an external location through a link like this: ftp://etc/etc/etc.png

I'm able to load the images perfectly fine into the canvas, but the moment I try to execute the JavaScript to actually crop the image, nothing happens.

However this does work when I use a source such as images/img.png

Does anyone have a clue how to fix this?

Answer 1

If you look in your browser console, you will likely find that you are getting a Cross-Origin Resource Sharing policy error similar to this:

Image from origin ' https://example.com ' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost ' is therefore not allowed access.

The documentation for this image cropper states:

If you try to start cropper on a cross-origin image, please make sure that your browser supports HTML5 CORS settings attributes, and your image server supports the Access-Control-Allow-Origin option.

Assuming you own the web server that is serving the image, you may want to look into enabling CORS .

Answer 2

To crop image using canvas with known xy coordinates of image from where you want to crop image :
Here either you can use the path defined by you like imgsrc="images/img.png" or any base64 data of image as base64.

function generateImageThumbnailArrayFromCLientInfo(imgsrc,x,y ClientInfoArray) {
        var image = new Image();
        image.src = imgsrc;
        var imagePieces = [];


                var canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext('2d');

                context.drawImage(image, x, y, image.width, image.height, 0, 0, canvas.width, canvas.height);


                imagePieces=canvas.toDataURL();

        return imagePieces;
    }