What to do in such a case - failed to execute 'todataurl' on 'htmlcanvaselement': tainted canvases may not be exported.
I'm trying to create a thumbnail for the video using plyr - https://github.com/sampotts/plyr I can get the blob as in the below codepen: https://codepen.io/suryaiiit/pen/LeZwgr But when I try the same in the VF, it is giving error.
: false, Options: { } }; setTimeout(function() { var instances = plyr.setup({ // Output to console //debug: true }); }, 2000); function getThumb() { console.log('getThumb') var video = document.getElementById('video'); var w = video.videoWidth;//video.videoWidth * scaleFactor; var h = video.videoHeight;//video.videoHeight * scaleFactor; var canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; var ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, w, h); document.getElementById("preview").appendChild(canvas); var data = canvas.toDataURL("image/jpg"); console.log('canvas data: ', data); } [removed]
I get the below error:
thum:50 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at getThumb
In such a scenario - failed to execute 'todataurl' on 'htmlcanvaselement': tainted canvases may not be exported. I took your code and used 'plyr' CDN instead of static resource and it worked for me. Below is my working code which did not show the error thum:50 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at getThumb
[removed] [removed] window.Player = { instance: null, Testing: false, Options: { } }; setTimeout(function() { var instances = plyr.setup({ // Output to console //debug: true }); }, 2000); function getThumb() { console.log('getThumb') var video = document.getElementById('video'); var w = video.videoWidth;//video.videoWidth * scaleFactor; var h = video.videoHeight;//video.videoHeight * scaleFactor; var canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; var ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, w, h); document.getElementById("preview").appendChild(canvas); var data = canvas.toDataURL("image/jpg"); console.log('canvas data: ', data); } [removed]
Check and let me know if it works.