利用canvas给图片打马赛克

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片打码</title><style>canvas {border: 1px solid red;}</style>
</head><body><canvas width="820" height="500" id="canvas"></canvas><script>window.onload = function () {let canvas = document.querySelector('#canvas');if (!canvas.getContext) return;let ctx = canvas.getContext('2d');let image = new Image();image.src = "dilireba.jpg";image.onload = function () {// 设置画布的宽度和高度canvas.width = image.width * 2;canvas.height = image.height;ctx.drawImage(image, 0, 0); // 把图片绘制到画布上// 获取原来图片的像素数据let oldImageData = ctx.getImageData(0, 0, image.width, image.height);// 创建一个新的像素数据let newImageData = ctx.createImageData(image.width, image.height);// 自己定义一个块的容量，把N个像素作为一个单位// 把图片分块 每一块的size设置为5（自己随便定义的）let size = 2;for (let i = 0; i < oldImageData.width / size; i++) {for (let j = 0; j < oldImageData.height / size; j++) {// 从每一块中随机取出一个像素点的颜色let x = Math.floor(Math.random() * size);let y = Math.floor(Math.random() * size);let color = getPxColor(oldImageData, i * size + x, j * size + y);// 把这个像素点的颜色给这一小块全部铺满for (let m = 0; m < size; m++) {for (let n = 0; n < size; n++) {setPxColor(newImageData, i * size + m, j * size + n, color);}}}}ctx.putImageData(newImageData, image.width, 0);}// 设置指定坐标位置像素的值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, x, y) {let color = [];// 有多宽，就是一排有多少个像素点let width = imageData.width;for (let i = 0; i < imageData.data.length; i++) {color[0] = imageData.data[(y * width + x) * 4];color[1] = imageData.data[(y * width + x) * 4 + 1];color[2] = imageData.data[(y * width + x) * 4 + 2];color[3] = imageData.data[(y * width + x) * 4 + 3];}return color;}}</script>
</body></html>

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

php图片素描化,html5利用canvas实现图片转素描效果
本章给大家介绍html5如何利用canvas实现图片转素描效果.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 素描滤镜原理: 最基础的算法就是: 1.去色:(去色公式:gray = ...
利用canvas下载图片，透明区默认变为黑色
问题:利用canvas下载图片,透明区默认变为黑色 HTML <canvas id="canvas"></canvas> <div style=&qu ...
手把手教你利用js给图片打马赛克
文章目录效果演示 Canvas简介知识点简介 step-by-step 完整代码效果演示 Canvas简介这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 AP ...
JS使用canvas给图片打马赛克
简介利用canvas加载图片后,画布上的各像素的颜色(r,g,b)值来填充色块,达到马赛克效果. 效果图代码 html <canvas id="canvas" data- ...
js 利用canvas转换图片格式并下载图片
1.利用canvas转换格式思路很简单,就是在canvas上drawImage,然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { ...
利用js结合canvas给图片打马赛克
效果演示什么是canvas? <canvas> 元素用于图形的绘制,只是图形容器. 元素本身并没有绘制能力,您必须使用js脚本来绘制图形. getContext() 方法可返回一个对象, ...
利用canvas给图片添加水印
前言前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前 ...
JS利用Canvas实现图片等比例裁剪、压缩
最近在做一个政务类的移动端H5项目,用户体量达百万级别,有一个模块中有上传图片反馈的功能,由于各个手机产商拍照的像素值的都不一样,后台去浏览这个图片的时候就出现大小不一的情况,另外有些图片并不需要上传 ...
利用canvas绘制图片加水印
wxml <view class="container"><button bindtap="chooseImages">选择图片< ...

利用canvas给图片打马赛克

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

最新文章

热门文章