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>
推荐答案
听起来像是 CORS 问题.
Sounds like a CORS issue.
视频与网络服务器的来源不同.
The Video is on a different origin than the web server.
如果您可以让视频在响应中包含Access-Control-Allow-Origin: *"标头,并且您可以设置 video.crossorigin = "Anonymous",那么您可能可以将其关闭.
If you can get the video to include an "Access-Control-Allow-Origin: *" header in the response, and you can set video.crossorigin = "Anonymous", then you can probably pull this off.
我使用 Charles Web Proxy 将标题添加到我想要处理的任何图像或视频中.
I used Charles Web Proxy to add the header to any image or video I wanted to work with.
参见 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/
Here's a Fiddle working with an Image: 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/"
这是您要找的吗?
这篇关于canvas.toDataURL() 安全错误操作不安全的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!