0

I have been trying to deploy my computer vision project on web, but when using OpenCV package for showing up the image through JavaScript file, it prompts an error

Uncaught DOMException DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at Module.imread (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:9105348)
    at cv.onRuntimeInitialized (c:\Users\tonya\Projects\Cvzone_web_app\Module_A_Introduction\1_template\main.js:5:26)
    at doRun (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:9104302)
    at run (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:9104462)
    at runCaller (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:9103961)
    at removeRunDependency (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:14897)
    at receiveInstance (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:8907244)
    at receiveInstantiatedSource (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:8907364)
    --- Promise.then ---
    at instantiateArrayBuffer (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:8907536)
    at instantiateAsync (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:8908146)
    at createWasm (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:8908390)
    at <anonymous> (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:30:9069105)
    at <anonymous> (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:46:10)
    at <anonymous> (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:14:15)
    at <anonymous> (c:\Users\tonya\Projects\Cvzone_web_app\Resources\opencv.js:22:2)

This is the JavaScript file that I'm working on.

function openCvReady() {
    cv["onRuntimeInitialized"] = () => {
        console.log("OpenCv Ready")
        // read an image from the image source and convert to opencv format
        let imgMain = cv.imread("img-main"); // image in opencv mat format
        cv.imshow("main-canvas", imgMain);
        imgMain.delete(); // to free the memory allocated
    }
}

If anyone have come across this issue, kindly please let me know to get rid of it.

I need to get rid of this error at first, so that I could integrate my webcam for further processes. Error: Uncaught DOMException DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Christoph Rackwitz
  • 11,317
  • 4
  • 27
  • 36

0 Answers0