canvas.toDataURL（）安全错误操作不安全 [英] canvas.toDataURL() Security Error The operation is insecure

问题描述

当我尝试在将视频上传到服务器之前获取屏幕截图并将其另存为PNG时，遇到以下问题：

When I am trying to get a screenshot and save it as PNG before uploading video to server, I am having the following problem

我希望你能解决我的问题...

I hope you can solve my problem ...

/*Output image show view*/
$('#file_browse').change(function(e){
    getVideo(this);
});

var capbtn = document.querySelector('#video_capture');
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var w, h, ratio;

video.addEventListener('loadedmetadata', function() {
    ratio = video.videoWidth / video.videoHeight;
    w = video.videoWidth - 100;
    h = parseInt(w / ratio, 10);
    canvas.width = w;
    canvas.height = h;           
}, false);

capbtn.addEventListener("click", function(){
    context.fillRect(0, 0, w, h);
    context.drawImage(video, 0, 0, w, h);
    var objImageData = canvas.toDataURL("data:image/png;");  
});

function getVideo(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var video = document.getElementsByTagName('video')[0];
            var sources = video.getElementsByTagName('source');
            sources[0].src = e.target.result;
            video.load();
            video.style.display="block";
        }
        reader.readAsDataURL(input.files[0]);
    }
}

<input id="video_capture" type="submit" value="Capture" />
<video id="video_view" controls>
    <source src="movie.mp4" type="video/mp4">
</video>
<canvas width="300" height="300"></canvas>

推荐答案

这是因为相同的原始政策。基本上，您无法使用画布来访问从其他来源/网站加载的视频数据。

It's because of the Same Origin Policy. Basically, you're not allowed to access the video data of something loaded from another origin/site using a canvas.

在画布上绘制视频数据会设置 origin-clean 标志为false，这会阻止您以任何方式获取图片数据。

Drawing video data on the canvas sets the origin-clean flag to false, which stops you from getting the image data in any way.

请参阅 toDataURL 了解更多信息。

这篇关于canvas.toDataURL（）安全错误操作不安全的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！