JS使用canvas给图片打马赛克

简介

利用canvas加载图片后，画布上的各像素的颜色（r,g,b）值来填充色块，达到马赛克效果。

效果图

代码

html

<canvas id="canvas" data-src="data:images/test.jpg" width="800" height="600"></canvas>

javascript

    const mosaicImage = (target, mosaicSize = 20) => {let canvas = document.getElementById(target),_canvas = document.createElement('canvas');if (!canvas || !canvas.getContext) {return false;}/*** 根据图片填充马赛克块*/const createMosaic = (context, width, height, size, data) => {for (let y = 0; y < height; y += size) {for (let x = 0; x < width; x += size) {/*** 取出像素的r,g,b,a值*/let cR = data.data[(y * width + x) * 4],cG = data.data[(y * width + x) * 4 + 1],cB = data.data[(y * width + x) * 4 + 2];context.fillStyle = `rgb(${cR},${cG},${cB})`;context.fillRect(x, y, x + size, y + size);}}};/*** 将数据画到canvas*/const draw = (_context, imageData, context) => {createMosaic(_context, _canvas.width, _canvas.height, mosaicSize, imageData);context.drawImage(_canvas, 0, 0);};const init = () => {let context = canvas.getContext('2d');/*** 设置图片来源*/let img = new Image();img.src = canvas.getAttribute('data-src');/*** 加载图片*/img.onload = () => {let _context = _canvas.getContext('2d'),imageData;/*** 图片大小与canvas匹配*/_canvas.width = img.width;_canvas.height = img.height;/*** 重置canvas画布大小*/canvas.width = img.width;canvas.height = img.height;_context.drawImage(img, 0, 0);/*** 获取canvas各像素的颜色信息* 像素的颜色信息从左到右,r, g, b, a 值排列*/imageData = _context.getImageData(0, 0, _canvas.width, _canvas.height);draw(_context, imageData, context);};};init();};/*** div对象, 及马赛克大小*/mosaicImage('canvas', 8);


查看原文：https://www.huuinn.com/archives/469更多技术干货：风匀坊关注公众号：风匀坊

JS使用canvas给图片打马赛克相关推荐

利用js结合canvas给图片打马赛克
效果演示什么是canvas? <canvas> 元素用于图形的绘制,只是图形容器. 元素本身并没有绘制能力,您必须使用js脚本来绘制图形. getContext() 方法可返回一个对象, ...
html验证码图片,js+h5 canvas实现图片验证码
本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一.使用技术原生js技术+html5 canvas画图利用Math.random()函数随 ...
JS实现Canvas中图片淡出效果_艾孜尔江撰
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>实现C ...
js 利用canvas转换图片格式并下载图片
1.利用canvas转换格式思路很简单,就是在canvas上drawImage,然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { ...
js使用canvas拼接图片
人狠话不多,先看看图,是不是你需要的效果(文章最后有最终效果),样子有点点那个啥,将就着看一下就是了(图片来自网络): 测试代码如下 <!doctype html> <html la ...
JS利用Canvas实现图片等比例裁剪、压缩
最近在做一个政务类的移动端H5项目,用户体量达百万级别,有一个模块中有上传图片反馈的功能,由于各个手机产商拍照的像素值的都不一样,后台去浏览这个图片的时候就出现大小不一的情况,另外有些图片并不需要上传 ...
利用canvas给图片打马赛克
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
html5 图片局部马赛克,javascript - JS实现马赛克图片效果完整示例
主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下本文实例讲述了JS实现马赛克图片效 ...
用c语言编写图片马赛克代码代码,canvas实现图片马赛克的示例代码
1. 原生canvas实现用到的API 1) getContext(contextID) ---返回一个用于在画布上绘图的环境复制代码代码如下: Canvas.getContext('2d') // ...

JS使用canvas给图片打马赛克

简介

效果图

代码

JS使用canvas给图片打马赛克相关推荐

最新文章

热门文章