canvas 像素操作
像素，即像素点，一个像素只有一个颜色
100*100 的 px 的屏幕区域有 100*100*4 个像素点，即 width*height*4
rgba(0, 0, 0, 1); 在 css 中透明的范围为 0-1
rgba(0, 0, 0, 255); 在 canvas 中透明的范围也为 0-255
读取空白画布的像素点，为黑色透明色 (0, 0, 0, 0)____即使画布设置颜色为 red
所以，一般读取 绘画 的像素点
- 读取已有像素，改写后再绘制
// 1. 读取矩形像素信息 参数1，参数2 矩形左上角坐标
var imgData = pen.getImageData(100, 100, 100, 100); 参数3，参数4 矩形的 width 和 height
// 2. 改变像素
for(var i=0; i<imgData.data.length; i++){
imgData.data[4*i+0] = 144;
imgData.data[4*i+1] = 144;
imgData.data[4*i+2] = 144;
imgData.data[4*i+3] = 144;
}
// 3. 将改变的像素数组，绘制带画布 (100, 100) 区域
pen.putImageData(imgData, 100, 100);
- 自建一个像素数据数据，改写后绘制
// 1. 创建像素对象 返回的像素数组，也是黑色透明色 (0, 0, 0, 0);
var imgData = pen.createImagData(100, 100);
// 2. 改变像素信息
for(var i=0; i<imgData.length; i++){
imgData.data[4*i+0] = 14;
imgData.data[4*i+1] = 164;
imgData.data[4*i+2] = 154;
imgData.data[4*i+3] = 255;
}
// 3. 写入已改变像素点 数组
pen.putImageData(imgData, 100, 100);
单个像素写入操作 (封装)
1. 获取画布所有像素点的信息
var imgData = pen.getImageData(0, 0, myCanvas.width, myCanvas.height);
2. 设置 (99, 99) 点 为 蓝色
setPxInfo(imgData, 99, 99, [0, 0, 255, 0]);
3. 函数封装
function setColorPos(imgArr, x, y, rgba){
imgArr.data[(imgArr.width*y+x)*4+0] = rgba[0];
imgArr.data[(imgArr.width*y+x)*4+1] = rgba[1];
imgArr.data[(imgArr.width*y+x)*4+2] = rgba[2];
imgArr.data[(imgArr.width*y+x)*4+3] = rgba[3];
};
读取单个像素颜色操作 (封装)
1. 获取画布所有像素点的信息
var imgData = pen.getImageData(0, 0, myCanvas.width, myCanvas.height);
2. 设置 (99, 99) 点 为 蓝色
getPxInfo(imgData, 99, 99);
3. 函数封装
function getColorPos(imgArr, x, y){
var rgba = [];
rgba[0] = imgArr.data[(imgArr.width*y+x)*4+0];
rgba[1] = imgArr.data[(imgArr.width*y+x)*4+1];
rgba[2] = imgArr.data[(imgArr.width*y+x)*4+2];
rgba[3] = imgArr.data[(imgArr.width*y+x)*4+3]; return rgba;
};
图片马赛克处理 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <script type="text/javascript" src="./js/kjfFunctions.js"></script>
<script type="text/javascript" src="./js/index.js"></script> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} #wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head> <body> <div id="wrap"></div> <!-- javascript 代码 -->
<script type="text/javascript">
// 创建 画布的width 画布的height 背景颜色 父元素
function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
var myCanvas = document.createElement("canvas");
myCanvas.width = canvasWidth;
myCanvas.height = canvasHeight;
myCanvas.innerText = " 您的浏览器不支持 canvas，建议更新或者更换浏览器。";
if(bgColor){
myCanvas.style.backgroundColor = bgColor;
};
if(parentObj){
parentObj.appendChild(myCanvas);
}; return myCanvas;
}; var wrap = document.getElementById("wrap");
var myCanvas = createCanvasTo(1040, 480, "#eee", wrap); // 获取画笔
var pen = myCanvas.getContext("2d");
pen.fillStyle = 'olive'; // 填充的颜色
pen.strokeStyle = "blue"; // 笔的颜色
pen.lineWidth = 4; // 笔宽
pen.lineCap = "round"; // 圆形结束
pen.lineJoin = "round"; // 圆角 // 开始绘制
var imgObj = new Image();
imgObj.src = "./img/Nick.jpg";
imgObj.onload = function(){
pen.drawImage(imgObj, 0, 0, 520, 480); var imgData = pen.getImageData(0,0,520,480); size = 5;
var i = 0,
j = 0,
a = 0,
b = 0;
for(i=0; i<imgData.width; i++){
for(j=0; j<imgData.height; j++){
var colorPoint = getColorPos( imgData,
Math.floor(i*size+Math.random()*size),
Math.floor(j*size+Math.random()*size)); for(a=0; a<size; a++){
for(b=0; b<size; b++){
setColorPos(imgData, i*size+a, j*size+b, colorPoint);
};
};
};
};
pen.putImageData(imgData, 520, 0);
}; function getColorPos(imgArr, x, y){
var rgba = [];
rgba[0] = imgArr.data[(imgArr.width*y+x)*4+0];
rgba[1] = imgArr.data[(imgArr.width*y+x)*4+1];
rgba[2] = imgArr.data[(imgArr.width*y+x)*4+2];
rgba[3] = imgArr.data[(imgArr.width*y+x)*4+3]; return rgba;
}; function setColorPos(imgArr, x, y, rgba){
imgArr.data[(imgArr.width*y+x)*4+0] = rgba[0];
imgArr.data[(imgArr.width*y+x)*4+1] = rgba[1];
imgArr.data[(imgArr.width*y+x)*4+2] = rgba[2];
imgArr.data[(imgArr.width*y+x)*4+3] = rgba[3];
}; </script>
</body>
</html>
图片反相处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片反相</title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} #wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head> <body> <div id="wrap"></div> <!-- javascript 代码 -->
<script type="text/javascript">
// 创建 画布的width 画布的height 背景颜色 父元素
function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
var myCanvas = document.createElement("canvas");
myCanvas.width = canvasWidth;
myCanvas.height = canvasHeight;
myCanvas.innerText = " 您的浏览器不支持 canvas，建议更新或者更换浏览器。";
if(bgColor){
myCanvas.style.backgroundColor = bgColor;
};
if(parentObj){
parentObj.appendChild(myCanvas);
}; return myCanvas;
}; var wrap = document.getElementById("wrap");
var myCanvas = createCanvasTo(520*3, 480, "#eee", wrap); var imgObj = new Image();
imgObj.src = "./img/Nick.jpg";
imgObj.onload = function(){
var pen = myCanvas.getContext("2d");
pen.drawImage(imgObj, 0, 0, 520, 480);
pen.drawImage(imgObj, 520, 0, 520, 480); var pxObj = pen.getImageData(520+100, 100, 100, 160);
setColorInversion(pxObj);
pen.putImageData(pxObj, 520+100, 100); pxObj = pen.getImageData(0, 0, 520, 480);
setColorInversion(pxObj);
pen.putImageData(pxObj, 520*2, 0);
}; function setColorInversion(pxObj){
var i = 0;
var j = 0;
for(i=0; i<pxObj.width; i++){
for(j=0; j<pxObj.height; j++){
pxObj.data[(pxObj.width*j+i)*4+0] = 255 - pxObj.data[(pxObj.width*j+i)*4+0];
pxObj.data[(pxObj.width*j+i)*4+1] = 255 - pxObj.data[(pxObj.width*j+i)*4+1];
pxObj.data[(pxObj.width*j+i)*4+2] = 255 - pxObj.data[(pxObj.width*j+i)*4+2];
pxObj.data[(pxObj.width*j+i)*4+3] = 150;
};
};
};
</script>
</body>
</html>
HTML5_canvas_像素操作_图片马赛克_图片反相的更多相关文章
-
HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题
canvas 图片加载 pen.drawImage(ele, showX, showY, imgWidth, imgHeight); ele 将 img 元素 加载到画布上 步骤 1. 创建一个 ...
-
CLOSE-UP FORMALWEAR_意大利进口_2015秋冬_男装发布会_西装图片系列_男装西装设计资料_WeArTrends时尚资讯网_国内最专业的服装设计资讯网站
CLOSE-UP FORMALWEAR_意大利进口_2015秋冬_男装发布会_西装图片系列_男装西装设计资料_WeArTrends时尚资讯网_国内最专业的服装设计资讯网站 CLOSE-UP FORMA ...
-
PHP图片裁剪_图片缩放_PHP生成缩略图
在制作网页过程中,为了排版整齐美观,对网页中的图片处理成固定大小尺寸的图片,或是要截去图片边角中含有水印的图片,对于图片量多,每天更新大量图,靠人工PS处理是不现实的,那么有没有自动处理图片的程序了! ...
-
基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
-
2.4.5 用NPOI操作EXCEL－－插入图片
我们知道,在Excel中是可以插入图片的.操作菜单是“插入->图片”,然后选择要插入图片,可以很容易地在Excel插入图片.同样,在NPOI中,利用代码也可以实现同样的效果.在NPOI中插入图片 ...
-
JAVA之旅（二十六）——装饰设计模式，继承和装饰的区别，LineNumberReader，自定义LineNumberReader，字节流读取操作，I/O复制图片
JAVA之旅(二十六)--装饰设计模式,继承和装饰的区别,LineNumberReader,自定义LineNumberReader,字节流读取操作,I/O复制图片 一.装饰设计模式 其实我们自定义re ...
-
PPT导出图片质量太差?简单操作直接导出印刷质地图片
PPT导出图片质量太差?简单操作直接导出印刷质地图片 PPT不仅可以用于展示文档,还可以用于简单图片合成处理,同时,PPT文档还可以全部导出为图片. 默认情况下,PPT导出的图片为96DPI ...
-
Java学习笔记——IO操作之以图片地址下载图片
以图片地址下载图片 读取给定图片文件的内容,用FileInputStream public static byte[] mReaderPicture(String filePath) { byte[] ...
-
Spring_MVC_教程_快速入门_深入分析
Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...
随机推荐
-
heading python decorator
decorator make a wrapper function do something before and after the original function. The wrapper f ...
-
微信小视频复制到手机本地Android APP 分享
因为需要将拍的宝宝的微信小视频上传到亲宝宝软件,每次去手动找文件比较麻烦,所以做了个微信视频复制到手机本地的APP,做工虽然粗糙,但是绝对实用, 下载地址 http://pan.baidu.com/s ...
-
JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
-
MVC-登录并设置角色
1.新建一个类,设置角色: using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
-
python解析AMF协议
最近看公司同事在玩页游<斗破乾坤>我也进去完了一把,感觉画面还不错,就是不停的点鼠标做任务,一会就烦了,看了下前端配置文件,我们以error.json_3e30为例,这个肯定是记录错误码的 ...
-
Median of Two Sorted Arrays 解答
Question There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median o ...
-
为什么希捷选择了8GB作为标准的闪存容量呢？答案就在下面（新的驱动器可以实现一定程度上的写入缓存）
与前两代Momentus XT产品不同,希捷称第三代混合硬盘所使用的技术更接近真正的SSHD(Solid State Hybrid Disk?),而不是HHD.也就是说更偏向于固态硬盘.首先它不会属于 ...
-
vs2015 安装问题汇总
1. The product version that you are trying to set up is earlier than the version already installed o ...
-
ios至于理解锚
锚点ios出现在少数地方,多数用在动画. 今天看了一部电影,以上所有关于锚,两年前锚这个概念看cocos2d当被接触的基本概念,当时我没怎么看,今天看了,刚刚好学习. 阅读blog,它是关于锚,像: ...
-
SVN版本冲突解决详解
SVN版本冲突解决详解 分类: SVN(SubVersion)2009-11-23 15:45 27014人阅读 评论(12) 收藏 举报 svnsubversion服务器文档工作c 版本冲突原因: ...