“react-cropper – 与公共图片不正常工作”

huangapple go评论67阅读模式
英文:

react-cropper - Not working properly with public images

问题

我正在进行一个React项目,使用react-cropper 这里是文档

我获取的图片来自Laravel的公共文件,比如/public_html/public/images/etc

在添加参数checkCrossOrigin={false}后,我能够加载图片并进行预览,一切正常。

但是当我尝试裁剪时出现错误。一些带有access-control-allow-origin: *的图片可以正常工作。

以下是我在React脚本中尝试的内容:

var srcImg = 'path/of/laravel/public/image/img.png';
<Cropper
  style={{ height: 400, width: "100%" }}
  zoomTo={0.5}
  initialAspectRatio={1}
  preview=".img-preview"
  src={srcImg}
  checkCrossOrigin={false}
  viewMode={1}
  minCropBoxHeight={10}
  minCropBoxWidth={10}
  background={true}
  responsive={true}
  autoCropArea={1}
  checkOrientation={false}
  onInitialized={(instance) => {
    setBusinessImgCropper(instance);
  }}
  guides={true}
/>

我认为问题出在Laravel的公共图片上。或者仍然可以修复,请告诉我。

谢谢!

英文:

I am working on a react project with react-cropper docs here

The images I am getting are coming from Laravel public files like /public_html/public/images/etc

I am able to load image and preview is also working after adding param checkCrossOrigin={false}.

I am getting error when i trying to crop it.
some images are working fine who has access-control-allow-origin: *

Here is what i am trying with my react script

var srcImg = &#39;path/of/laravel/public/image/img.png&#39;;
&lt;Cropper
  style={{ height: 400, width: &quot;100%&quot; }}
  zoomTo={0.5}
  initialAspectRatio={1}
  preview=&quot;.img-preview&quot;
  src={srcImg}
  checkCrossOrigin={false}
  viewMode={1}
  minCropBoxHeight={10}
  minCropBoxWidth={10}
  background={true}
  responsive={true}
  autoCropArea={1}
  checkOrientation={false}
  onInitialized={(instance) =&gt; {
    setBusinessImgCropper(instance);
  }}
  guides={true}
/&gt;

I think the issue is on laravel public images. Or still it can be fixed let me know.

Thanks!

答案1

得分: 0

更新

以下更改适用于我:

withCredentials={true}
英文:

Update

Following changes worked for me

withCredentials={true}

huangapple
  • 本文由 发表于 2023年1月6日 13:43:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75027350.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定