大佬教程收集整理的这篇文章主要介绍了javascript – canvas.toDataURL()安全错误操作不安全,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
希望你能解决我的问题
/*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,w,h); context.drawImage(video,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>
视频与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,200,200); button.download = "cat.png"; button.href = canvas.canvas.toDataURL(); } catch (E) { alert(E); } }; image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"
这是你要找的吗?
以上是大佬教程为你收集整理的javascript – canvas.toDataURL()安全错误操作不安全全部内容,希望文章能够帮你解决javascript – canvas.toDataURL()安全错误操作不安全所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。