Skip to content

Instantly share code, notes, and snippets.

@whitneyburton
Last active June 17, 2019 22:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save whitneyburton/3e3131b461599de7d3e8bb520e4315f9 to your computer and use it in GitHub Desktop.
Save whitneyburton/3e3131b461599de7d3e8bb520e4315f9 to your computer and use it in GitHub Desktop.
Avatar Bug
When uploading a photo, if a user uploads and then repositions their photo (which fires our handlePositionChange method), then editor.getImageScaledToCanvas().toDataURL() works. If a user just uploading a photo and doesn't reposition it, the code breaks at .toDataURL() with the error:
SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
There is no img element to add crossorigin: 'anonymous' to, but I have added it to the canvas element.
Here is the method where the photo upload works:
const handlePositionChange = (newPosition) => {
setPosition(newPosition);
const img = editor.getImageScaledToCanvas().toDataURL();
setPreview(img);
};
And this is the method where the SecurityError comes up:
const handleNewImage = (e) => {
setImg(e.target.files[0]);
const img = editor.getImageScaledToCanvas().toDataURL();
setPreview(img);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment