非服务器模式下运行getImageData函数出现 the operation is insecure

我在非服务器模式下运行了一个获取图片像素数据的函数。报错。
报错为the operation is insecure.
解决思路为：打开服务器，将运行由：file:///D:/wamp64/www/js_programme/canvas_pixel.html
改为：http://localhost/js_programme/canvas_pixel.html
问题解决，结果图片：
下面放上自己的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas-像素操作</title></head><body><canvas id="canvas" width="300" height="227"></canvas><canvas id="canvas2" width="300" height="200"></canvas><canvas id="canvas3" width="300" height="200"></canvas></body><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");var img=new Image();// 创建一个<img>元素img.crossOrigin='anonymous';img.src='./rhino.jpg';img.onload=function(){ctx.drawImage(img,0,0);img.style.display='none';  };canvas.addEventListener('click',function(e){var x=e.offsetX;var y=e.offsetY;console.log(ctx.getImageData(100,150,5,5));console.log(ctx.getImageData(x,y,1,1).data);});/*var img=new Image();img.src='./rhino.jpg';img.crossOrigin='anonymous';//这行代码不能够要；var canvas=document.getElementById('canvas');var ctx=canvas.getContext('2d');img.οnlοad=function(){ctx.drawImage(img,0,0);img.style.display='none';};var hoveredColor=document.getElementById('canvas2').getContext('2d');var selectedColor=document.getElementById('canvas3').getContext('2d');hoveredColor.rect(0,0,300,200);selectedColor.rect(0,0,300,200);function pick(event,destination){var x=event.layerX;//鼠标的x，y数值；var y=event.layerY;console.log('mouse position of x,y is ',x,y);var imagedata=ctx.getImageData(x,y,2,2).data;//console.log('pixel is =',pixel);//var data=pixel.data;console.log('data is equal to ',imagedata);const rgba='rgba(data[0],data[1],data[2],data[3]/255})';destination.style.background=rgba;destination.textContext=rgba;return rgba;}canvas.addEventListener('mousemove',function(event){pick(event,hoveredColor);});canvas.addEventListener('click',function(event){pick(event,selectedColor);});*/</script></html>

最后提供两个有用的链接：
https://blog.csdn.net/weixin_34195364/article/details/91398741?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163305714116780271529684%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163305714116780271529684&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-11-91398741.pc_search_result_cache&utm_term=the+operation+is+insecure&spm=1018.2226.3001.4187

另外一个有用链接：
https://blog.csdn.net/jk007/article/details/16941467?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163305714116780271529684%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163305714116780271529684&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-8-16941467.pc_search_result_cache&utm_term=the+operation+is+insecure&spm=1018.2226.3001.4187

非服务器模式下运行getImageData函数出现 the operation is insecure相关推荐

性能测试Locust--(6)非UI模式下运行Locust
可以在没有Web UI的情况下运行Loccust. 例如,如果要以某种自动化流程(例如CI服务器)运行Locust,通过使用--no-web标记和-c和-r: $ locust -f locust_f ...
connect函数在阻塞和非阻塞模式下的行为
connect函数在阻塞和非阻塞模式下的行为当socket使用阻塞模式时,connect函数会阻塞到有明确结果才会返回,如果网络环境较差,可能要等一会,影响体验, 为了解决这个问题,我们使用异步co ...
socket的阻塞模式和非阻塞模式(send和recv函数在阻塞和非阻塞模式下的表现)
socket的阻塞模式和非阻塞模式无论是Windows还是Linux,默认创建socket都是阻塞模式的在Linux中,可以再创建socket是直接将它设置为非阻塞模式 int socket (i ...
非阻塞模式下 SEND 和 RECV 函数的返回值总结
send 和 recv 函数的各种返回值意义: 返回值 n 返回值含义大于 0 成功发送 n 个字节 0 对端关闭连接小于 0( -1) 出错或者被信号中断或者对端 TCP 窗口太小数据发不出去( ...
Qt：Qt实现Winsock网络编程—非阻塞模式下的简单远程控制的开发（WSAAsyncSelect）
Qt实现Winsock网络编程-非阻塞模式下的简单远程控制的开发(WSAAsyncSelect) 前言这边博客应该是 Qt实现Winsock网络编程-TCP服务端和客户端通信(多线程) 的姐妹篇,上 ...
非归档模式下重做日志覆盖后的rman恢复
非归档模式下重做日志覆盖后的rman恢复实验原理:在非归档模式下,数据库的重做日志不会写入归档日志中,对数据库的恢复只能依靠3个联机重做日志.当第一个重做日志满了,就切换第二个重做日志中,以此类推, ...
Oracle10g数据库归档与非归档模式下的备份与恢复
一.总述 1.数据库归档模式: * 非归档模式:当数据库数据只读不会改变时,数据不会改变,数据库适合用非归档模式, 这样提高机能 * 归档模式:对于数据库数据经常变换,数据库最好用归档模式,这样可以 ...
下运行maven命令_如何在批处理模式下运行 top 命令
可能已经知道 top 命令的绝大部分操作,除了很少的几个操作,如果我没错的话,批处理模式就是其中之一. -- Magesh Maruthamuthu(作者) top 命令是每个人都在使用的用于监控 ...
oracle10g利用归档恢复,Oracle10g数据库归档与非归档模式下的备份与恢复
一.总述 1.数据库归档模式: * 非归档模式:当数据库数据只读不会改变时,数据不会改变,数据库适合用非归档模式, 这样提高机能 * 归档模式:对于数据库数据经常变换,数据库最好用归档模式,这样可以 ...
php 如何执行top命令,技术|如何在批处理模式下运行 top 命令
top 命令是每个人都在使用的用于监控 Linux 系统性能的最好的命令.你可能已经知道 top 命令的绝大部分操作,除了很少的几个操作,如果我没错的话,批处理模式就是其中之一. 大部分的脚本编 ...

非服务器模式下运行getImageData函数出现 the operation is insecure

非服务器模式下运行getImageData函数出现 the operation is insecure相关推荐

最新文章

热门文章