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

taojunhust2

于 2021-10-01 10:57:46 发布

阅读量961

点赞数 1

文章标签： html5 javascript html canvas

本文链接：https://blog.youkuaiyun.com/weixin_47024922/article/details/120576180

版权

本文介绍了在非服务器环境下运行JavaScript获取图片像素数据时遇到的安全错误‘theoperationisinsecure’，并提供了解决方案。通过将文件路径从file协议改为http协议，成功解决了问题。代码示例中展示了如何在canvas上处理图片并获取点击位置的像素数据。此外，还给出了两个相关的博客链接供进一步阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在非服务器模式下运行了一个获取图片像素数据的函数。报错。
报错为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

最低0.47元/天解锁文章