执行效果：

1.gif

操作指南

数字越大越模糊噢~

HTML 部分

<body>
<div>
<input id="file" type="file" accept="image/*" /><canvas id="canvas"></canvas><img id="img-raw" /><label for="compress-times">压缩倍数：</label><input id="compress-times" type="number" value="12"><button>马赛克化</button>
</div>
</body>

CSS 部分

<style>body{display:flex;align-items: center;justify-content: center;}
img {display: none;}canvas {display: block;border: gray solid 1px;width: 600px;height: 600px;image-rendering: pixelated;}
</style>

JS 部分

<script type="text/javascript">let imgBlobUrl;const file = document.getElementById('file');const img = document.getElementById('img-raw');const compressTimes = document.getElementById('compress-times');const defaultCompressTimes = compressTimes.value | 0;const canvas = document.getElementById('canvas');const button = document.querySelector('button');const boundingRect = canvas.getBoundingClientRect();const ctx = canvas.getContext('2d');const canvas_w = boundingRect.width;const canvas_h = boundingRect.height;// 以 background-size: contain 形式设置图片尺寸function matchImgSizeToCanvas(imgElem = img) {let w = imgElem.width;let h = imgElem.height;if (w > canvas_w || h > canvas_h) {let radio = Math.max(h / canvas_h, w / canvas_w);radio = Number(radio.toFixed(2));imgElem.width = parseInt(w / radio);imgElem.height = parseInt(h / radio);}}// 绘制 1/N 大小的图像，画布宽高属性设为样式宽高的 1/N，从而实现画布内容的 N 倍放大function run() {let ct = parseInt(compressTimes.value) || defaultCompressTimes;canvas.width = parseInt(canvas_w / ct);canvas.height = parseInt(canvas_h / ct);ctx.drawImage(img, 0, 0, parseInt(img.width / ct), parseInt(img.height / ct));}function cleanCanvas() {ctx.clearRect(0, 0, canvas_w, canvas_h);}function reset() {img.removeAttribute('width');img.removeAttribute('height');cleanCanvas();matchImgSizeToCanvas(img);run();}file.addEventListener('change', function (e) {window.URL.revokeObjectURL(imgBlobUrl);const picFile = this.files[0];imgBlobUrl = window.URL.createObjectURL(picFile);img.onload = function init() {reset();}img.src = imgBlobUrl;}, false);button.addEventListener('click', reset, false);
</script>

注意：

要将js代码放在html的body以后，不然在html页面未被加载出来时，js操作会报错。

用 CSS 实现图片的马赛克风格相关推荐

【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌握HTML网页设计前端盒子的布局.嵌套,及css效果的使用... 微信官网首页主要有以下几个需要关注的 ...
java实现马赛克,java如何用Processing生成马赛克风格的图像
java如何用Processing生成马赛克风格的图像首先使用PImage来实例化对象,再通过loadImage赋值,两层for循环遍历图片上的像素点,每隔5个像素点,画一个直径为3的圆.颜色通过p ...
CSS+JS仿QQ面板风格的多级折叠下拉菜单
<html><head><title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title><style ty ...
vue-cli中解决css引用图片打包后找不到文件资源的问题
1.在CSS中引入图片 #slider1 {background-image: url(./bg02.jpg);background-size: cover; } 注意:此处的图片与索引文件在同一个目 ...
html css 背景图片
html css 背景图片文章目录 html css 背景图片视频代码视频 https://www.bilibili.com/video/BV1MJ411M7qi?from=search&am ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
利用wget 抓取网站网页包括css背景图片
利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
转: 用css把图片转为灰色图
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
js和css和img,Node.js压缩web项目中的js,css和图片
安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是 ...

用 CSS 实现图片的马赛克风格

执行效果：

操作指南

HTML 部分

CSS 部分

JS 部分

注意：

用 CSS 实现图片的马赛克风格相关推荐

最新文章

热门文章