react-cropper
React-cropper is the React component packaged with cropper.js
It’s very convenient out of the box, and if you have a need for front image clipping, 💗 is highly recommended
Schematic diagram:
To view the demo
Codesandbox. IO/s/wonderful…
The official documentation
The react – cropper: www.npmjs.com/package/rea…
cropper.js: https://https://github.com/fengyuanchen/cropperjs#options
Q&A
Pictures of cross-domain
The cause of
After the front and back ends are separated, images are often stored on cloud services, leading to cross-domain CORS problems in front-end requests.
The solution
Cross-domain requires the support of the browser and the server, which is supported by modern browsers (except the old VERSION of IE). Therefore, the server mainly needs to configure the Access-Control-Allow-Origin header in response
May also lead to problems
Canvas error
Failed to execute ‘toDataURL’ Tainted canvases may not be exported
This is also caused by incorrectly configuring images across domains. When cross-domain headers are configured on the server, the Canvas canvas no longer reports errors and can be drawn.
About the crossOrigin property
There are a lot of answers on the Internet, all say need to configure; However, the server side does not involve the transmission of cookies, in fact, do not need to set;
If you have a cookie transfer requirement, there are three properties associated with this
crossOrigin={"anonymous"}
checkCrossOrigin={false}
checkOrientation={false}
Copy the code