在线演示地址：css阴影画图

一，在css中有一个box-shadow属性，可以设置元素的阴影。

.item{

    width: 50px;

    height: 50px;

    background: #009688;

    box-shadow: 50px 0 red, 100px 0px #000;

}

效果：

二，box-shadow可以添加多个。

.item{

    width: 50px;

    height: 50px;

    background: #009688;

    box-shadow: 50px 0 red, 100px 0px #000;/*增加了一个*/

}

变成了：

当box-shadow添加的越来越多的时候，就形成了一个个像素点，用不同的颜色根据位置进行拼接，那么就可以拼接成一张图片。

三，效果图。

三，代码封装。

利用这一特性，再将它封装一下，就可以实现上传图片生成css阴影图。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <label style='margin-top:20px;background:#009688;color:#fff;text-align:center;padding:10px;display: block;cursor: pointer;'>

        上传图片 <span id="loading" style="color:rgb(214, 202, 202)"></span> <input style="display:none;left:-9999px;position:absolute;" type="file" id="file-input">

      </label>

    <br>

   <p style="background:#FAFAFA;border-left: 5px solid #e05637;text-align: left;padding:20px;font-size:18px;"> <a href="https://www.zhangpingguo.com/" style='text-decoration: none;color:#000' target="_blank">张苹果博客：www.zhangpingguo.com</a></p>

   <p style="background:#FAFAFA;border-left: 5px solid #1E9FFF;text-align: left;padding:20px;font-size:18px;">标签样式：</p>

    <p id="myInput" style="

    width: 100%;

    height: 300px;

    overflow: auto;

"></p>

    <p style="background:#FAFAFA;border-left: 5px solid #1E9FFF;text-align: left;padding:20px;font-size:18px;">效果图：</p>

    <div id="pixelated-image" style="height: 100vh;"></div>

</body>

<script>

    // 获取文件输入框和像素化图片元素

    const fileInput = document.getElementById('file-input');

    const pixelatedImage = document.getElementById('pixelated-image');

    // 定义一个将 RGB 颜色值转换成十六进制颜色值的函数

    function rgbToHex(r, g, b) {

        var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

        return hex;

    }

    // 给文件输入框添加 change 事件监听器

    fileInput.addEventListener('change', function () {

        // 获取用户选择的文件

        const file = fileInput.files[0];

        // 创建一个 FileReader 对象

        const reader = new FileReader();

        // 定义一个变量用于显示加载状态

        let loading = "";

        // 给 FileReader 对象添加 load 事件监听器

        reader.addEventListener('load', function () {

            // 创建一个 Image 对象

            const image = new Image();

            // 将 FileReader 对象读取的文件内容赋值给 Image 对象的 src 属性

            image.src = reader.result;

            // 显示加载状态

            loading = "正在生成中（图片越大就越慢,也可能会出问题.）...";

            document.getElementById("loading").innerText = loading;

            // 给 Image 对象添加 load 事件监听器

            image.addEventListener('load', function () {

               try {

                 // 创建一个 Canvas 对象

                 const canvas = document.createElement('canvas');

                // 设置 Canvas 对象的宽度和高度

                canvas.width = image.width;

                canvas.height = image.height;

                // 获取 Canvas 对象的 2D 上下文

                const context = canvas.getContext('2d');

                // 在 Canvas 对象上绘制图像

                context.drawImage(image, 0, 0);

                // 获取 Canvas 对象上的像素数据

                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

                const pixels = imageData.data;

                let html = '';

                let i = 0;

                let boxShadow = '';

                // 遍历像素数据

                while (i < pixels.length) {

                    const r = pixels[i];

                    const g = pixels[i + 1];

                    const b = pixels[i + 2];

                    const a = pixels[i + 3];

                    // 如果像素的 alpha 值大于 0，则将该像素的颜色转换成十六进制颜色值，并将其添加到 boxShadow 变量中

                    if (a > 0) {

                        const x = (i / 4) % canvas.width;

                        const y = Math.floor(i / 4 / canvas.width);

                        boxShadow += `${x}px ${y}px ${rgbToHex(r,g,b)},`;

                    }

                    i += 4;

                }

                // 隐藏加载状态

                loading = "已完成";

                document.getElementById("loading").innerText = loading;

                // 将像素化后的图片添加到页面中

                html =

                    `<div style="box-shadow: ${boxShadow.slice(0, boxShadow.length - 1)};width:1px;height:1px;"></div>`;

                document.getElementById("myInput").innerText = html;

                pixelatedImage.innerHTML = html;

               } catch (error) {

                   loading = "出错了";

                document.getElementById("loading").innerText = loading;

               }

            });

        });

        // 读取用户选择的文件

        reader.readAsDataURL(file);

    });

</script>

</html>

可能有人要问了，这有什么用？我只能说：你说的对。

更多信息请访问：张苹果博客

前端css阴影画图的更多相关文章

  1. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  4. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  5. 扯一扯前端css的整体架构设计：（2）base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  6. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  7. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  8. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  9. 前端 CSS 目录

    前端 CSS 介绍 前端 CSS语法 前端 CSS 注释

  10. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

随机推荐

  1. 2020美亚个人赛wp

    案例背景 2020年9月,数名信用卡持有人向警方报案,指他们的信用卡被不知名人士在一家本地网上商店购买手机.订单大部分来自海外的网络地址,但有一宗订单来自本地.警方经调查后发现该本地网络地址的注册地址 ...

  2. 使用rider调试lua

    emmylua1.3.5及以上版本支持rider调试,但emmylua的新版本只支持rider2020及以上版本,所以如果想用rider来调试lua,就要升级rider为2020,emmylua插件从 ...

  3. 从零开始配置vim(28)——DAP 配置

    首先给大家说一声抱歉,前段时间一直在忙换工作的事,包括但不限于交接.背面试题准备面试.好在最终找到了工作,也顺利入职了.期间也有朋友在催更,在这里我对关注本系列的朋友表示感谢.多的就不说了,我们正式进 ...

  4. 【二】分布式训练---参数服务器训练（飞桨paddle1.8）

    1.参数服务器训练简介 参数服务器训练是分布式训练领域普遍采用的编程架构,主要解决以下两类问题: 模型参数过大:单机内存空间不足,需要采用分布式存储. 训练数据过多:单机训练太慢,需要加大训练节点,来 ...

  5. Python库【数据处理、机器学习、大数据、文件处理等14个类的所有python库整理】

    吐血整理一个月--终于把所有Python库整理齐了....._小熊猫爱恰饭的博客-CSDN博客 参考链接: 一.数据处理 #python学习资料群:660193417 ##3 Chardet # 字符 ...

  6. 解决SpringMVC项目Jquery引入不生效问题

    根据多方查询,总结Jquery不生效问题如下几种原因: web.xml中拦截了静态资源,但是springmvc配置文件没有对静态资源访问进行设置 <!-- <mvc:resources l ...

  7. DBGrideh使用小结【EditorMode】当用户点击单元格的时候，自动进入编辑状态

    (1)控制一个单元格是否允许编辑(或者说文字选中),可以设置Grid的Options的dgEditing属性:如果该属性为False,那么用户只能选中该单元格而无法选中里面的内容,也无法进行编辑.(2 ...

  8. DHCP的安装与配置

    一:前期准备 1.打开windows虚拟机,使用仅主机模式 (虚拟机(M)→设置(S)→网络适配器) 2.修改Windows ip可选范围为192.168.1.204到192.168.1.207 对应 ...

  9. FreeSWITCH添加g729编码及pcap音频提取

    操作系统 : debian 11 (bullseye,docker).Windows10_x64 FreeSWITCH版本 :1.10.9 Docker版本:23.0.6 Python 版本  :   ...

  10. 基于 junit5 实现 junitperf 源码分析

    前言 上一节介绍了基于 junit4 实现 junitperf,但是可以发现定义变量的方式依然不够优雅. 那可以让用户使用起来更加自然一些吗? 有的,junit5 为我们带来了更加强大的功能. 拓展阅 ...