javascript - SecurityError:操作不安全。php
问题描述
尝试从视频创建缩略图。
我收到 SecurityError 任何人请帮助我。
这是我的脚本
<video id="video" src="<?php echo $file_path; ?>" onerror="failed(event)" controls="controls" preload="none" ></video>
<script type="text/javascript">
var index = 0;
var video = document.getElementById('video');
var starttime = 0.00; // start at 7 seconds
var endtime = 0.00; // stop at 17 seconds
video.addEventListener("timeupdate", function () {
if (this.currentTime >= endtime) {
this.pause();
getThumb();
}
}, false);
video.play();
video.currentTime = starttime;
function getThumb() {
var filename = video.src;
var w = video.videoWidth;//video.videoWidth * scaleFactor;
var h = video.videoHeight;//video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
//document.body.appendChild(canvas);
var data = canvas.toDataURL("image/jpg");
//send to php script
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log('saved');
}
}
console.log('saving');
xmlhttp.open("POST", 'process_thumb.php', true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
}
</script>
我在 Firefox 的控制台中收到此错误:
SecurityError: The operation is insecure. thumbnail_process.php:26
getThumb
<anonymous>
任何帮助,将不胜感激。
解决方案
当从不同目录加载图像或视频时,它也被视为本地主机中的跨域请求。所以我们需要将 crossOrigin 标签设置为 video 元素,告诉画布加载的视频来自另一个域。所以画布不会被污染。
没有 crossOrigin 标签,视频可能会加载,但画布会被污染。简而言之,受污染的画布无法转换为图像。所以引发了错误。
我没有尝试过这个解决方案,但你可以试试。我在视频中添加了crossOrigin标签:
<video id="video" src="<?php echo $file_path; ?>" onerror="failed(event)" controls="controls" preload="none" ></video>
<script type="text/javascript">
var index = 0;
var video = document.getElementById('video');
var starttime = 0.00; // start at 7 seconds
var endtime = 0.00; // stop at 17 seconds
video.crossOrigin = "anonymous";
video.addEventListener("timeupdate", function () {
if (this.currentTime >= endtime) {
this.pause();
getThumb();
}
}, false);
video.play();
video.currentTime = starttime;
function getThumb() {
var filename = video.src;
var w = video.videoWidth;//video.videoWidth * scaleFactor;
var h = video.videoHeight;//video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
//document.body.appendChild(canvas);
var data = canvas.toDataURL("image/jpg");
//send to php script
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log('saved');
}
}
console.log('saving');
xmlhttp.open("POST", 'process_thumb.php', true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
}
</script>
推荐阅读
- c# - MongoDb - 获取执行查询的日志
- javascript - 退出搜索框事件时如何重置占位符?
- python - 当基本 django 用户模型被覆盖时,如何正确处理当前登录的用户作为作者?
- c# - 使用 Azure DevOps Build 从我的代码中看不到代码覆盖率
- python - 在 Docker 容器中运行`flake8 src`时没有输出
- roku - Roku 中是否有运动口音字符?
- android - 如何在 Cordova 中查找本机代码 - Android 项目
- javascript - xgettext 没有找到所有翻译的字符串
- angularjs - 有没有办法在angularjs中stateprovider的状态函数中添加$filter
- python - 在 pyspark DataFrame 中创建特定类型的空数组列