2021-01-06 09:51

Calling toDataURL on network image crop

Assuming I will to initialize the cropper with some image URL and I want to be able to edit it (meaning to crop the image and call canvas.toDataURL based on the cropped image). The problem is, I will get

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

while calling canvas.toDataURL because the server didn't send "Access-Control-Allow-Origin: * response header. In order for the server to send such header I need to load the image with crossOrigin = 'anonymous' attribute set. Would it be OK to make it configurable via props that underlying the (I use '.ReactCrop--image-copy' image to load it onto canvas and get dataURL) has crossOrigin = 'anonymous' attribute set? (I can issue a PR if such change is OK.)


  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • weixin_39673471 weixin_39673471 4月前

    I'm trying to understand what you're doing with ReactCrop--image-copy - are you editing the image live as they are changing the crop or something, and also using a remote image url?

    点赞 评论 复制链接分享
  • weixin_39616855 weixin_39616855 4月前

    Basically my goal is to be able to send the cropped image to the backend and I'm doing it by loading the cropped image area onto canvas, reading it to dataURL format and sending that base64 payload to the backend.

    But after some considerations I decided to implement this in my wrapper component, no need to bloat the react-crop-image compoentent here. So I'll close this issue now :) Thank you

    点赞 评论 复制链接分享
  • weixin_39673471 weixin_39673471 4月前

    Cool glad you found a solution 👍

    点赞 评论 复制链接分享
  • weixin_39584549 weixin_39584549 4月前

    Hi . I know that this is an old post. However, I encountered the same issue. May I know what did you do in the wrapper component? It seems to me that crossOrigin = 'anonymous' is always set after src in React.

    Edit: I just realised that I can pass the crossorigin='anonymous'props in react-image-crop and that solved my issue.

    Thanks guys!

    点赞 评论 复制链接分享