Is it possible to initialize cropper with external image url?

[devqualwebs]

Similar to various available libraries in angular 1.x or jquery. Is it possible to initialize image cropper with external url like http://lorempixel.com/250/250/

[PierreRochard]

I have the same question, @devqualwebs were you able to figure it out?

[cstefanache]

Hello. I am on the road at the moment. if somebody can create a PR with setImage function from cropper on the cropperComponent that should do the trick.

[PierreRochard]

Thanks for the response @cstefanache, I'll try my hand at it!

[cstefanache]

Hello, managed to do a test try and found out that setImage is public so ... doing the following in your app:

var image:HTMLImageElement = new Image();
    image.src ='https://www.google.ro/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
    image.addEventListener('load', (data) => {
        this.cropper.setImage(image);
    });

but you can run into: XMLHttpRequest cannot load https://www.google.ro/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Trying to paint the image onto a canvas and get the imageData you will get the error that the canvas was tinted with cross origin image.

if somebody has any idea ... glad to merge a PR

[PierreRochard]

I ran into the same problem! I think the solution is server-side rather than client-side, I'll find out on Monday.

[PierreRochard]

My solution was hitting http instead of https. I wasn't able to get https CORS to work even after correctly configuring the server.

Now I'm debugging why the image only "appears" after I click inside the cropping box.

[PierreRochard]

Sorry to spam this issue but hopefully this is helpful, the reason the image wasn't appearing was due to the following exception:

EXCEPTION: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

So I added the following and now everything seems to be working fine: this.image.crossOrigin = 'Anonymous';

tldr: this feature works!

[cstefanache]

Can this be closed?

[PierreRochard]

Yes! Thank you @cstefanache

[fvonberg]

@cstefanache could you please add this to the readme.md? I tried 2h until I found this helpful answer ;-)

[PierreRochard]

@fvonberg send in a pull request! 😄

[jt-helsinki]

Not sure if you worked the access control problems out. The XSS error can be solved by changing server side configuration to allow CORS access-control origin. It's different for each server (obviously) but this should fix up the issues with "Access-Control-Allow-Origin" errors.

[jt-helsinki]

sorry, is should also add you could use something like this:

async ngOnInit(): Promise<void> {
        const image = await this.loadImage("https://www.example.com/example2.jpeg");
        this.cropper.setImage(image);
    }

    async loadImage(url): Promise<any> {
        return new Promise(resolve => {
            const image = new Image();
            image.crossOrigin = "anonymous";
            image.onload = () => {
                resolve(image);
            };
            image.src = url;
        });
    }

Notice the line image.crossOrigin = "anonymous";. That will help you.

[dogLin]

@PierreRochard I tried add image.crossOrigin = "Anonymous", but still error. can you tell me your how do you do in server silent for CORS.

below is my code and error client:

  ngAfterViewInit() {
    let image: HTMLImageElement = new Image();
    image.crossOrigin = "Anonymous"
    image.onload = ()=> {
      this.cropper.setImage(image);
    };
    image.src = this.picurl;
  }

server:

app.all('*', function(req, res, next) {
    console.log(req.method);
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Headers', 'Content-type');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");
    res.header('Access-Control-Max-Age',1728000);
});

and error :

Access to Image at 'http://192.168.9.176:3000/images/logo.png' from origin 'http://192.168.9.92:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.9.92:4200' is therefore not allowed  @access.

[kaushik44]

Hi dogLin, Add Allow control allow extension.