Canvas.toDataURL() Ошибка безопасности Операция небезопасна

Когда я пытаюсь получить снимок экрана и сохранять его как 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>

Ответ 1

Звучит как проблема CORS.

Видео находится на другом происхождении, чем веб-сервер.

Если вы можете получить видео, чтобы включить в ответ заголовок "Access-Control-Allow-Origin: *", и вы можете установить video.crossorigin = "Анонимный", тогда вы, вероятно, можете отключить это.

Я использовал 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/"

Это то, что вы ищете?

Ответ 2

Это из-за Одинаковая политика происхождения. В принципе, вам не разрешается обращаться к видеоданным чего-либо, загруженного из другого источника/сайта, используя холст.

Рисование видеоданных на холсте устанавливает флаг origin-clean в значение false, что никак не мешает вам получать данные изображения.

Подробнее см. toDataURL.

Ответ 3

В документах toDataURL("data:image/png;"), по-видимому, не документировано:

Попробуйте заменить .toDataURL("data:image/png;"); на .toDataURL("image/png");

Ответ 4

Привет, у меня такая же проблема, в системе, где я показываю видео, мои пользователи должны создать большой палец, когда они выбирают видео, но затем Ошибка безопасности.

Это решение работает только в том случае, если вы можете изменить сервер, затем вы можете отправить видео или шрифт или и т.д. с помощью CORS. Поэтому вам нужно отредактировать httpd.conf(конфигурацию Apache с сервера, на котором вы вытаскиваете видео).

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(mp4)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

а на вашей веб-странице или приложении к тегу видео добавьте: crossOrigin="Anonymous"

Это фрагмент моего кода, после которого все работает снова.

document.getElementById('video_thumb').innerHTML =
             '<img src="'+data_uri+'"  width="250"
                        height="250px" crossOrigin="Anonymous">';

При этом canvas.toDataURL() не вызывать ошибки