html5 图片局部马赛克,html5 canvas 图片打马赛克 demo
#pic{
display:none;
}
The size of the original pic need to be 360 pixs.
canvas 标签
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("pic");
img.onload = function(){
ctx.drawImage(img,0,0);
var picSize = 360;
var currentX = 0;
var currentY = 0;
while(currentY
var imageData = ctx.getImageData(currentX,currentY,20,20);
// need to run on server due to the using getImageDta
var rgbaArray =caculateRGBA(imageData);
var newImageData = ctx.createImageData(imageData);
for (var i = 0; i
newImageData.data[i+0]=rgbaArray[0];
newImageData.data[i+1]=rgbaArray[1];
newImageData.data[i+2]=rgbaArray[2];
newImageData.data[i+3]=rgbaArray[3];
};
ctx.putImageData(newImageData,currentX,currentY+400);
currentX+=20;
if(currentX>=picSize){
currentX=0;
currentY+=20;
};
}
function caculateRGBA(imgData){
var RGBA = [0,0,0,255];
//caculate avg rgb
var sumR = 0;
var sumG = 0;
var sumB = 0;
var sumA = 0;
var pixNum = imgData.width*imgData.height;
//console.log("area width: " + imgData.width + " pixs.");
//console.log("area heitht: " + imgData.height + " pixs.");
//console.log("Total pix number: " + pixNum);
for (var i = 0; i
sumR += imgData.data[i+0];
sumG += imgData.data[i+1];
sumB += imgData.data[i+2];
sumA += imgData.data[i+3];
};
var avgR = Math.round(sumR/pixNum);
var avgG = Math.round(sumG/pixNum);
var avgB = Math.round(sumB/pixNum);
var avgA = Math.round(sumA/pixNum);
/*
console.log("R:"+avgR);
console.log("G:"+avgG);
console.log("B:"+avgB);
console.log("A:"+avgA);
*/
RGBA[0] = avgR;
RGBA[1] = avgG;
RGBA[2] = avgB;
RGBA[3] = avgA;
console.log(RGBA);
return RGBA;
};
};
html5 图片局部马赛克,html5 canvas 图片打马赛克 demo相关推荐
- canvas 实现图片局部模糊_HTML5 Canvas图片马赛克模糊动画
本文作者html5tricks,转载请注明出处 经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用 HTML代码如下 Change pixel resolution 32 定义了一 ...
- canvas绘制圆形马赛克方法二
因某些项目需求:必须先绘制整出整个图片在打马赛克,"canvas绘制圆形马赛克方法一"中方式不能满足,故用以下方式实现: 方法简介: 先绘制出整个图片在画布a上,在将马赛克数据co ...
- HTML5 Canvas图片马赛克模糊动画
经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果.在演示中我们可以拖动滑竿来设置马赛克模糊的程度,你可以在不同的值下观察图片 ...
- html5游戏开发马赛克对比,canvas实现图片马赛克的示例代码
1. 原生canvas实现用到的API 1) getContext(contextID) ---返回一个用于在画布上绘图的环境 Canvas.getContext('2d') // 返回一个 Canv ...
- html5 简单图片效果,【HTML5】Canvas绘制简单图片教程,
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawIm ...
- HTML5开发笔记:初窥CANVAS,上传canvas图片到服务器
本文向您展示怎样转换Image为canvas,以及canvas如何提取出一个Image. 转换 Image为 Canvas 要把图片转换为Canvas(画板,画布),可以使用canvas元素 con ...
- HTML5 Canvas 开发 绘图方法整理 【七、canvas 图片切割、自定义文字、字体背景】
Canvas 图片切割 语法: ctx.clip(); 从画布中剪切任意形状和尺寸. 需要注意的是: 剪切之后,除设定Canvas "状态" 外, 一般都会在裁剪后的图形里绘制. ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
- 把图片做成html,HTML5实践-图片设置成灰度图
以前,在web上要显示灰度图片的话,只有手工使用图片软件转换.但是现在借助于html5的canvas可以实现这个过程,而不需要再借助图片编辑软件了.我用html5和jquery做了一个demo,来展示 ...
- html5 dzzxjbd cn,UEditor实现单张图片上传至腾讯云(对象存储服务)功能(html5
UEditor文件上传默认只支持后端语音,因为项目是前后端分离开发,所以需要前端自行实现图片上传. 这里是直接修改的 ueditor/ueditor.all.js文件 ueditor.all.js中找 ...
最新文章
- 理解有符号数和无符号数的区别
- 关于 NODE.js 并行线程 worker_threads 的使用与详解。
- mysql innodb 数据恢复_MYSQL INNODB 数据库恢复 转
- Python的系统管理_08_python_异常处理
- java鼠标中键_java-selenium鼠标键盘操作Actions类和Robot
- 学生选课系统代码-6-conf配置层
- paip.提升用户体验---提高兼容性无JS支持总结
- 【2016 ACM-ICPC 曼谷区域赛 Gym-101161 G】Binary Strings【矩阵快速幂】
- Android学习视频Mars-Android开发视频教程(全集)
- 【数学】高等数学中连续、可导、极限概念的随想
- 微信测试公众号申请配置
- Redis Cluster集群搭建
- [营销]浅谈如何提高网站PR值
- 计算机图解教程视频教程,超详细图文+视频电脑组装教程,装机之家手把手教你组装一台电脑(9)...
- 7个实用的免费网站托管站点
- 免费学python的网课-像玩游戏一样学Python,和各种网课说再见
- linux intel wifi驱动,ubuntu 8.04下面 Intel WIFI link 5100无线网卡驱动安装
- loadrunner基础分享ppt
- 网页登录华为云空间,查看空间内容
- 读书笔记-人月神话4