Search code examples
javascriptcanvashtml2canvas

canvas-images (securityError)


this is barfly, I have a problem with canvaced-images. (securityError) I built a tool for designing visitcards. Here I use several canvases for text and one for a logo. Without inserting an image for the logo, everything works fine. But when I insert an image I get the securityError. (In the beginning it also worked and I simply can`t figure out, which changes lead to that problem). Now I tried to make a html2canvas before sending them via ajax to a php-file. But still the same problem. It's working without the logo and throws a securityError when a logo is inserted. This is confusing me most. I set the whole thing on my server. The Url is: http://obs-design.de/visitenkarten/ to add an image, dobleclick any of the text-canvaces an click on the image-icon on the editor. After proceeding, the html2canvas is shown under the original app. (here still with images). The uploaded imagefile can be called at: http://obs-design.de/visitenkarten/canvasimg/visitenkarte.png (only al long there is no image included). Does anyone have a hint for me? Thanks in advance.


Solution

  • This is because you are calling html2canvas() on your body element.

    Your document does contain a reference to https://code.jquery.com/ui/1.12.0/themes/base/images/ui-icons_444444_256x240.png which is not loaded with proper CORS header.

    The simple fix is to call html2canvas on your #innerbox element. In this part of the document, there is nothing that will taint your canvas and you'll be able to call any export method as you wish.

    Also note that canvas element doesn't have a crossOrigin attribute, media-resources drawn to its context must have been served with proper cross-origin requests, you can't do that at the canvas level.