Question

创建缩略图时遇到问题。我在html2canvas PHP代理的帮助下解决了跨域问题。

控制台中没有错误消息。但不幸的是，Thumnbnails不可见，透明或白色。

源代码中的输出剪切：

<img src="data:image/png;base64,iVBORw0KGgoAAAA.......Output cut in the source code:NSUhEUgAABN8AAAS4=" width="120">

剧本：

  <script>
var video = document.getElementById("thumb");
video.addEventListener("loadedmetadata", initScreenshot);
video.addEventListener("playing", startScreenshot);
video.addEventListener("pause", stopScreenshot);
video.addEventListener("ended", stopScreenshot);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ssContainer = document.getElementById("screenShots");
var videoHeight, videoWidth;
var drawTimer = null;

function initScreenshot() {
  videoHeight = video.videoHeight; 
  videoWidth = video.videoWidth;
}

function startScreenshot() {
  if (drawTimer == null) {
    drawTimer = setInterval(grabScreenshot, 1000);
  }
}

function stopScreenshot() {
  if (drawTimer) {
    clearInterval(drawTimer);
    drawTimer = null;
  }
}

function grabScreenshot() {
  ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
  convert(document.getElementById("thumb-parent"));
}
function convert(target) {
        html2canvas(target, {
            "proxy": "../html2canvasproxy.php",
            "logging": true, //Enable log (use Web Console for get Errors and Warnings)
            "onrendered": function(canvas) {
                var img = new Image();
                    img.onload = function () {
                        img.onload = null;
                        img.width = 120;
                        document.getElementById("screenShots").appendChild(img);                            
                    };
                    img.src = canvas.toDataURL("image/png");
            }
        });
    }

Answer 1

从外观上看，它是因为浏览器认为你的画布已经被污染了。 - 使用您上面提供的示例，我让视频运行一点，然后尝试记录toDataURL输出：

的console.log（canvas.toDataURL（））; VM1344：2未捕获的DOMException：无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布。

我怀疑是因为视频是从第三方网址加载的。

尝试从与HTML代码相同的域中加载视频，看看是否有效

带有动态缩略图的HTML5视频

1 个答案: