频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
利用canvas获取图片像素值
2017-01-20 09:53:16         来源:Super洛伽的博客  
收藏   我要投稿

利用canvas的getImageData方法可以读取画布的某位置像素值。

1.首先创建一个canvas对象,

var canvas = document.createElement(‘canvas’);

2.获取它的2d上下文。

var context = canvas.getContext(‘2d’);

3.创建一个image对象,并指定它的图片路径,设置允许跨域

var image = new Image();

image.src = ‘image/test.png’;

image.crossOrigin = ‘Anonymous’;

4.在image的onload方法中得到像素值

image.onload = function() {
    //将图片按像素写入画布 
    context.drawImage(image, 0, 0, this.width, this.height);
    //读取图片某位置像素信息(x,y为需要读取的像素位置) 
    imageData = context.getImageData(x, y, 1, 1).data;
}

返回值imageData是一个数组,里面存了该位置像素的rgba值

注意1:chrom浏览器的canvas无法读取网络图片,会报错误:

这里写图片描述

需要进行设置,试了网上的方法但是并没有效果。火狐浏览器是可以访问的。

注意2:canvas无法绘制8位的灰度图,只能绘制32位的图片,所以获取像素信息也只能获取32位的图片。

点击复制链接 与好友分享!回本站首页
上一篇:JavaScriptDOM
下一篇:jquery的ajax和getJson跨域获取json数据
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站