canvas.toDataURL()安全错误操作不安全

Question

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

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

/*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>

Answer 1

听起来像是一个CORS问题.

视频与Web服务器的来源不同.

如果您可以让视频在响应中包含"Access-Control-Allow-Origin:*"标题,并且您可以设置video.crossorigin ="Anonymous",那么您可以将其关闭.

我使用Charles Web Proxy将标题添加到我想要使用的任何图像或视频中.

请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

另请参见https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

这是一个使用图像的小提琴:http: //jsfiddle.net/mcepc44p/2/

var canvas = document.getElementById("canvas").getContext("2d");

var button = document.getElementById("button");

var image = new Image();
image.crossOrigin = "anonymous";  // This enables CORS
image.onload = function (event) {
    try {
        canvas.drawImage(image, 0, 0, 200, 200);
        button.download = "cat.png";
        button.href = canvas.canvas.toDataURL();        
    } catch (e) {
        alert(e);
    }
};
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

这是你在找什么？

Answer 2

这是因为同源政策.基本上,您不允许使用画布访问从其他来源/站点加载的内容的视频数据.

在画布上绘制视频数据会将origin-clean标志设置为false,从而阻止您以任何方式获取图像数据.

有关更多信息,请参阅toDataURL.

Answer 3

同样，通过一些实验得出了这个结论，在 iOS 上，看起来位置 .crossOrigin 参数位置应该放在 .src 之前

// Webkit will throw security error when image used on canvas and canvas.toDataUrl()

return new Promise((resolve, reject) => {
  let image = new Image();
  img.onload = () => {resolve(image)}
  img.src = `${url}?${Date.now()}`;
  img.crossOrigin = ""
})

// Webkit will not throw security error when image used on canvas and canvas.toDataUrl()

return new Promise((resolve, reject) => {
  let img = new Image()
  img.onload = () => {resolve(img)}
  img.crossOrigin = ''
  img.src = `${url}?${Date.now()}`
})