I'm using dom-to-image for the first time. I want to capture thumbnails from stilled videos that are displayed using the HTML5 video tag.
I'm using code based closely upon the supplied examples on github.
The videos I'm testing with are short MP4 files that display and play OK in a Chrome browser.
It works but the image generated for download is faulty. Most features of the image are missing.
The PHP that handles the video display looks like this..
echo '<video id="my-node" width="640" height="480" controls>';
echo '<source src="'. $result_video_URL .'" type="video/mp4">';
echo 'Your browser does not support the video tag.';
echo '</video>';
I've simple click-on text to use when testing..
echo '<div id="grab_thumb" > ' . "<H3>Grab Current Still</H3></div> ";
The javascript looks like this...
(function($) {
"use strict";
$(document).ready(function() {
$(' #grab_thumb').on('click', function() {
var node = document.getElementById('my-node');
domtoimage.toJpeg(document.getElementById('my-node'), {
quality: 0.95
})
.then(function(dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
});
});
});
})(jQuery);
When I click on the text with ID "grab_thumb" the image is generated for download and downloads OK. However, instead of seeing an image that appears on the stilled video all I see is an image with grey rectangular background that matches the video frame and some items that appear in the play bar at the foot of the video. Most of the detail is missing though.
I'm using an up-to-date version of Google Chrome and the the site is WordPress.
I've done repeated searches (on Stackoverflow and more generally) but can't find anything that seems directly relevant.