How can I return the canvas
on this function
as webp
image?
function capture(video) {
if(scaleFactor == null){
scaleFactor = 1;
}
//var w = video.videoWidth * scaleFactor;
//var h = video.videoHeight * scaleFactor;
var w = 700;
var h = 400;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
var uniq = 'img_' (new Date()).getTime();
canvas.setAttribute('id', uniq);
return canvas ;
}
CodePudding user response:
Canvas has a method known as .toDataURL(type, encoderOptions)
.
I this case the following snippet should suffice
canvas.toDataURL('image/webp');
This will give you a data url which is a base64 encoding of the image and will look something like
data:image/webp;base64,UklGRqgCAABXRUJQVlA4WAoAAAAwAAAAxwAAYwAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgPAAAAAQcQEREAUKT//yWi/6lwAFZQOCBSAAAA8AcAnQEqyABkAD5tNplJpCMioSBoAIANiWlu4XXwADuh1VJsmIdVSbJiHVUmyYh1VJsmIdVSbJiHVUmyYh1VJsmIdVSbJhYAAP7/wbAAAAAAAA==
More information for this can be found on https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
CodePudding user response:
Tainted canvases may not be exported.
This answer demonstrates the problem with using canvas to capture video thumbnail images. Videos are typically stored on some other domain. And even though you can play these videos in a <video>
element and capture video thumbnails to a <canvas>
element, you won't be able to export the image data.
For example, an export statement like:
let str = canvas.toDataURL("image/webp"); // or "image/png"
throws the security exception:
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Setting the crossorigin="anonymous"
attribute of the video and canvas usually won't fix this error and may prevent the video from loading. So a prerequisite to making such a design work is store the videos on same domain or else at a CORS enabled location.
Related SO question: Tainted canvases may not be exported
Snippet
The snippet loads a video and then captures a thumbnail image as it plays. This part works as expected and displays the thumbnail on the right. Yet, when we try to use the thumbnail data the browser throws an exception.
let video = document.querySelector("video"),
canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
dataURL = "";
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
// auto capture video thumbnail after video starts playing
video.addEventListener("progress", function(e) {
if (video.currentTime > 1 && !dataURL) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// try to export the dataURL
try {
dataURL = canvas.toDataURL("image/webp");
console.log("success!", dataURL);
} catch (error) {
dataURL = error.message;
console.error(error.message);
}
}
});
body {
font-family: sans-serif;
}
h5 {
margin: 0.2rem;
}
video, canvas {
border: 1px solid lightgray;
margin: 0.5rem;
}
<h5>Demo - Capture video thumbnail image</h5>
<video
src="http://www.nasa.gov/downloadable/videos/nasa_-_targeting_mars.mp4"
style="height:100px;width:auto;"
controls
muted
autoplay></video>
<canvas></canvas>