Closed devqualwebs closed 7 years ago
I have the same question, @devqualwebs were you able to figure it out?
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.
Thanks for the response @cstefanache, I'll try my hand at it!
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
I ran into the same problem! I think the solution is server-side rather than client-side, I'll find out on Monday.
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.
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!
Can this be closed?
Yes! Thank you @cstefanache
@cstefanache could you please add this to the readme.md? I tried 2h until I found this helpful answer ;-)
@fvonberg send in a pull request! 😄
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.
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.
@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.
Hi dogLin, Add Allow control allow extension.
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/