先看效果

上图是一段打码过后的代码截图。

简单说一下实现思路

就是通过创建多个canvas，一个用来绘制原图，一个用来绘制全马赛克图，一个用来绘制笔迹或者叫打码的区域，最后一个canvas用来将三个canvas绘制到一个canvas之上。

主要是通过设置canvas的globalCompositeOperation属性设置“图层”的叠加情况。马赛克图层通过笔迹图层遮罩显示，一开始笔迹图层为空，所以马赛克图层不会显示，通过用户在马赛克图层上涂抹笔迹，马赛克图层显示，从而达到涂抹打马赛克的效果。

废话少说直接上代码

<!DOCTYPE html>
<html><head>
</head><body><div style="position: relative;"><!-- http://cover.acfunwiki.org/cover.php --><!-- <img alt="asd" src="./tmp.png" style="position: absolute;" /> --><canvas id="canvas" style="position: absolute;"></canvas></div><script>let image = new Image()image.src = "./tmp.png"// let canvas:HTMLCanvasElement = document.getElementById("canvas")let canvas = document.getElementById("canvas")let ctx = canvas.getContext("2d")let canvas_1 = document.createElement("canvas")let canvas_layer_1 = canvas_1.getContext("2d") // 用来画原图的图层let canvas_2 = document.createElement("canvas")let canvas_layer_2 = canvas_2.getContext("2d") // 用来画马赛克图的图层let canvas_3 = document.createElement("canvas")let canvas_layer_3 = canvas_3.getContext("2d") // 用来画笔迹的图层image.onload = async () => {canvas_3.width = canvas_2.width = canvas_1.width = canvas.width = image.width;canvas_3.height = canvas_2.height = canvas_1.height = canvas.height = image.height;canvas_layer_1.drawImage(image, 0, 0); // 把图片绘制到画布上// 获取原来图片的像素数据let oldImageData = canvas_layer_1.getImageData(0, 0, image.width, image.height);// 创建一个新的像素数据let newImageData = canvas_layer_2.createImageData(image.width, image.height);// 自己定义一个块的容量，把N个像素作为一个单位// 把图片分块 每一块的size设置为5（自己随便定义的）let size = 10;for (let i = 0; i < oldImageData.width / size; i++) {for (let j = 0; j < oldImageData.height / size; j++) {// 从每一块中随机取出五个像素点的颜色let locations = new Array(5).fill(null).map(x=>{return [i * size + Math.floor(Math.random() * size), j * size + Math.floor(Math.random() * size)]})let color = getPxColor(oldImageData, locations);// 把这个像素点的颜色给这一小块全部铺满for (let m = 0; m < size; m++) {for (let n = 0; n < size; n++) {setPxColor(newImageData, i * size + m, j * size + n, color);}}}}canvas_layer_2.putImageData(newImageData, 0, 0)canvas_layer_3.lineCap="round"canvas_layer_3.lineJoin="round"canvas_layer_3.lineWidth=40canvas_layer_3.fillStyle="blue"canvas.addEventListener("mousedown", mouseHandle)function mouseHandle(e) {if(e.type === "mousedown"){canvas_layer_3.moveTo(e.offsetX, e.offsetY);canvas.addEventListener("mousemove", mouseHandle)canvas.addEventListener("mouseup", mouseHandle)}else if(e.type === "mousemove"){canvas_layer_3.lineTo(e.offsetX, e.offsetY);}else if(e.type === "mouseup"){canvas.removeEventListener("mousemove", mouseHandle)canvas.removeEventListener("mouseup", mouseHandle)}canvas_layer_3.stroke()}function draw() {ctx.clearRect(0,0,canvas.width,canvas.height)ctx.drawImage(canvas_3,0,0)ctx.globalCompositeOperation="source-in";ctx.drawImage(canvas_2,0,0)ctx.globalCompositeOperation="destination-over";ctx.drawImage(canvas_1,0,0)requestAnimationFrame(draw)}requestAnimationFrame(draw)}// 设置指定坐标位置像素的值function setPxColor(imageData, x, y, color) {imageData.data[(y * imageData.width + x) * 4] = color[0];imageData.data[(y * imageData.width + x) * 4 + 1] = color[1];imageData.data[(y * imageData.width + x) * 4 + 2] = color[2];imageData.data[(y * imageData.width + x) * 4 + 3] = color[3];}function getPxColor(imageData, locations) {let color = [];// 有多宽，就是一排有多少个像素点let width = imageData.width;// 颜色混合之后再返回color = locations.reduce((preVal, currVal, index)=>{let x = locations[index][0]let y = locations[index][1]if(index === 0){preVal[0] = imageData.data[(y * width + x) * 4];preVal[1] = imageData.data[(y * width + x) * 4 + 1];preVal[2] = imageData.data[(y * width + x) * 4 + 2];preVal[3] = imageData.data[(y * width + x) * 4 + 3];} else {preVal[0] = Math.round(preVal[0] + (imageData.data[(y * width + x) * 4] - preVal[0]) * 0.5);preVal[1] = Math.round(preVal[0] + (imageData.data[(y * width + x) * 4 + 1] - preVal[0]) * 0.5);preVal[2] = Math.round(preVal[0] + (imageData.data[(y * width + x) * 4 + 2] - preVal[0]) * 0.5);preVal[3] = preVal[3];}return preVal},[])return color;}</script>
</body></html>

Canvas 原生实现图片涂抹打马赛克功能相关推荐

android图片美化开源,GitHub - xingxing-yan/BLImage: Android中美化图片的库。功能包括滤镜，贴纸，标签，裁剪，涂鸦，亮度，饱和度，对比度，马赛克等功能...
BLImage Android中美化图片的库.功能包括滤镜,贴纸,标签,裁剪,涂鸦,亮度,饱和度,对比度,马赛克等功能效果图添加依赖: 在project的build.gradle中添加: allp ...
使用canvas实现对图片的批量打码
最近有个需求,利用h5的canvas对图片一些涉及个人隐私的地方进行打码再上传,而且最好能实现批量打码.意思是在一张图片上对哪些地方做了打码,后续的所有图片都在同样的地方也可以自动打上码,不用人工一张 ...
前端线上图片怎么生成马赛克？
前言说起图片的马赛克,可能一般都是由后端实现然后传递图片到前端,但是前端也是可以通过canvas来为图片加上马赛克的,下面就通过码上掘金来进行一个简单的实现. 实现实现过程 <img src ...
【Android 内存优化】Android 原生 API 图片压缩原理 ( 哈夫曼编码开关 | 哈夫曼编码原理 | libjpeg-turbo 函数库 )
文章目录一. 哈夫曼编码开关二. 哈夫曼编码原理三. libjpeg-turbo 函数库四. libjpeg-turbo 函数库下载 [Android 内存优化]图片文件压缩 ( Androi ...
【Android 内存优化】Android 原生 API 图片压缩原理 ( Bitmap_compress 方法解析 | Skia 二维图形库 | libjpeg 函数库 | libpng 函数库 )
文章目录一. 图片质量压缩方法二. Skia 二维图形库三. libjpeg.libpng 函数库引入在博客 [Android 内存优化]图片文件压缩 ( Android 原生 API 提供的 ...
【Android 内存优化】Android 原生 API 图片压缩原理 ( 图片质量压缩方法 | 查找 Java 源码中的 native 方法对应的 C++ 源码 )
文章目录一. 图片质量压缩方法二. 查找对应的 Native 方法源码三. 分析 Bitmap.cpp 中动态注册 Native 方法在博客 [Android 内存优化]图片文件压缩 ( An ...
load方法引入本地html报错,分享基于plus.downloader的图片懒加载功能，支持本地缓存v1.1.0...
今天试用了下hello mui上的图片懒加载功能,发现有些地方还无法满足我的需求,ajax动态加载的时候无法实现懒加载. 然后又看了下36kr的示例,因为代码关系实在太多了,耦合度比较高,遂自己动手写 ...
java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
app canvas渲染后图片黑色_H5 基于 canvas 实现电子签名并生成PDF文档
(给前端大全加星标,提升前端技能) 转自:coyota666 https://juejin.cn/post/6901273585428463624 前言电子签名通俗来说就是通过技术手段实现在电子文档 ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

Canvas 原生实现图片涂抹打马赛克功能

先看效果

简单说一下实现思路

废话少说直接上代码

Canvas 原生实现图片涂抹打马赛克功能相关推荐

最新文章

热门文章