设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 关于不二的7 8 - 用Canvas来玩弄像素的一些问题
返回列表 发新帖
查看: 3600|回复: 6

[已解决]关于不二的7 8 - 用Canvas来玩弄像素的一些问题

[复制链接]
隨鈊乄鎍慾
发表于 2018-7-21 21:03:17 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
我为什么实现不了灰色效果代码如下：
照抄都实现不了，尴尬了。特些救助！
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         html,body{
  8.             height: 100%;
  9.             margin: 50px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <canvas id="fishcCanvas" width="1000" height="999">大兄弟，你的浏览器咋不支持Canvas呢？</canvas>
  15.         <script type="text/javascript">
  16.                 var canvas = document.getElementById("fishcCanvas");
  17.                 var context = canvas.getContext("2d");
  18.                 var img= new Image();
  19.                 img.src="FishC.png";
  20.                 img.onload= function(){
  21.                         context.drawImage(img,0,0,530,530);
  22.                         imgd = context.getImageData(0,0,530,530);
  23.                         var pxcount=530*530;
  24.                         for(var i=0; i< pxcount*4; i+=4)
  25.                         {
  26.                                 var myRed = imgd.data[i];//红色
  27.                                 var myGreen = imgd.data[i+1];//绿色
  28.                                 var myBlue = imgd.data[i+2];//蓝色
  29.                                 var myAlpha = imgd.data[i+3];//透明度
  30.                                
  31.                                 var myGray=parseInt((myRed+myBlue+myGreen)/3);//均值获灰度值
  32.                                 imgd.data[i] = myGray;
  33.                                 imgd.data[i+1] = myGray;
  34.                                 imgd.data[i+2] = myGray;
  35.                         }
  36.                        
  37.                         context.putImageData(imgd,0,0);
  38.                 }
  39.                
  40.         </script>
  41. </body>
  42. </html>
复制代码

微信截图_20180721205717.png
最佳答案
月排行榜 / 总排行榜
不二如是
2018-7-22 12:30:38
1、首先这个灰度图代码没有错，报错getImageData为什么无法执行呢？

2、问题：没有加载图片资源。。。将图片直接放在和index.html的同级目录下（ FishC.zip (2.01 MB, 下载次数: 1, 售价: 2 鱼币) ）：
Snip20180722_99.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

ba21
发表于 2018-7-22 10:19:19 | 显示全部楼层
参考：
https://blog.csdn.net/qq_25403605/article/details/49148423
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

隨鈊乄鎍慾
 楼主| 发表于 2018-7-22 12:27:07 | 显示全部楼层
ba21 发表于 2018-7-22 10:19
参考：
https://blog.csdn.net/qq_25403605/article/details/49148423

也许是基础差了点，看不懂！
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2018-7-22 12:30:38 | 显示全部楼层    本楼为最佳答案   
1、首先这个灰度图代码没有错，报错getImageData为什么无法执行呢？

2、问题：没有加载图片资源。。。将图片直接放在和index.html的同级目录下（ FishC.zip (2.01 MB, 下载次数: 1, 售价: 2 鱼币) ）：
Snip20180722_99.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

隨鈊乄鎍慾
 楼主| 发表于 2018-7-22 13:26:57 | 显示全部楼层
本帖最后由 隨鈊乄鎍慾 于 2018-7-22 13:27 编辑
不二如是 发表于 2018-7-22 12:30
1、首先这个灰度图代码没有错，报错getImageData为什么无法执行呢？

2、问题：没有加载图片资源。。。将 ...


图和html文件是放一块的，如图：
路径有没有问题？
微信截图_20180722132540.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2018-7-22 13:45:14 | 显示全部楼层
隨鈊乄鎍慾 发表于 2018-7-22 13:26
图和html文件是放一块的，如图：
路径有没有问题？

文件目录不建议用中文，换成xxx.html试一试

代码我测试了，没有问题
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

隨鈊乄鎍慾
 楼主| 发表于 2018-7-22 13:58:09 | 显示全部楼层
不二如是 发表于 2018-7-22 13:45
文件目录不建议用中文，换成xxx.html试一试

代码我测试了，没有问题

我直接放G：盘下把html文件的名字也改成英文的了：
还是不行！抓狂！
微信截图_20180722135522.png
执行结果还是彩色！没有变成灰色
微信截图_20180722135534.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-8 00:52

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表