Search code examples
safaricross-domainfabricjsoperation

Canvas throw error of 'Error: Uncaught (in promise): SecurityError: The operation is insecure. toDataURL@[native code] '

  1. I am working in one Image editor in which I need to set video as canvas background.
  2. So I was used fabricjs version 1.7.22 which is too old but I can't update in my project due to it's complexity.
  3. I am first creating one html video element and then insert that element into var img = new fabric.Image(htmlVideoElement) of fabricjs object.
  4. Then I set that fabricJS img object into canvas background like canvas.setBackgroundImage(img, ()=>{ canvas.renderAll() }, {crossOrigin: 'anonymous'})
  5. I already added crossOrigin tag at all place still error is occure in mac safari browser.
  6. It is working perfect in windows machine in all browser. but not in safari in MAC.
  7. Error is like this : operation is insecure and this error is raised when I try to make image from canvas using canvas.toDataURL()
  8. NOTE : I don't have any control over cross domain server from where video will load.so I can't configure cross domain request in server.

Is there any solution or suggestion that can help me to set video into canvas canvas background with cross domain url.

Solution

  • After Brain smashing , I found Exact source of issue. It's not cross origin issue. it's issue of image url.

    I was set pixabay Stock Video Url. Now In short, pixabay video url is not actual url of video location. when I paste that url into browser, it was redirect me on another url and display video in browser. so I got issue that Url that i used before is one king of API URL. and I was set into video Source so issue was generate.

    Now I send xmlHttpRequest() on that pixabay Image Url and get original video location url and then I set it to canvas background and It's working.