图片生成box-shadow并下载

2024-08-28 20:12
文章标签 图片 生成 下载 box shadow

本文主要是介绍图片生成box-shadow并下载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

把图片生成由box-shadow拼接成的阴影组成的图片

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>图片生成阴影html</title></head><body><input id="file" type="file" /><button id="btn">制作</button><script src="./index.js"></script></body>
</html>

js

(function () {// 获取元素const files = document.getElementById('file');const btn = document.getElementById('btn');// 添加事件btn.addEventListener('click', () => {const file = files.files[0];if (!file) {alert('请选择图片');return;}// 创建 FileReader 对象 获取文件信息const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {// 创建 img 元素const img = document.createElement('img');img.src = e.target.result;// img 加载完成img.onload = function () {// 创建 canvas 元素const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');// 设置 canvas 宽高canvas.width = img.width;canvas.height = img.height;// 将图片绘制到 canvas 上ctx.drawImage(img, 0, 0);// 获取图片的像素数据const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 获取图片的 box-shadow 值const boxShadow = getBoxShadows(imageData);// 生成html文件的字符串const html = montageHtml(boxShadow);// 生成html文件downloadHtml(html);};};});// 获取图片的 box-shadow 值function getBoxShadows(imageData) {let boxShadow = '';// 遍历像素数据 获取每个像素的 RGBA 值  X Y 坐标for (let i = 0; i < imageData.data.length; i += 4) {const r = imageData.data[i];const g = imageData.data[i + 1];const b = imageData.data[i + 2];const a = imageData.data[i + 3];const x = (i / 4) % canvas.width;const y = Math.floor(i / 4 / canvas.width);// 拼接box shadowif (boxShadow) {boxShadow += `,${x}px ${y}px 1px rgba(${r}, ${g}, ${b})`;} else {boxShadow += `${x}px ${y}px 1px rgba(${r}, ${g}, ${b})`;}}return boxShadow;}// 生成html文件 并下载function downloadHtml(html) {const blob = new Blob([html], { type: 'text/html' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'box-shadow.html';a.click();URL.revokeObjectURL(url);}function montageHtml(boxShadow) {const html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 1px;height: 1px;box-shadow: ${boxShadow};}</style></head><body><div></div></body></html>`;return html;}
})();

这篇关于图片生成box-shadow并下载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1115769

相关文章

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

Go语言如何判断两张图片的相似度

《Go语言如何判断两张图片的相似度》这篇文章主要为大家详细介绍了Go语言如何中实现判断两张图片的相似度的两种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 在介绍技术细节前,我们先来看看图片对比在哪些场景下可以用得到:图片去重:自动删除重复图片,为存储空间"瘦身"。想象你是一个

使用Python实现base64字符串与图片互转的详细步骤

《使用Python实现base64字符串与图片互转的详细步骤》要将一个Base64编码的字符串转换为图片文件并保存下来,可以使用Python的base64模块来实现,这一过程包括解码Base64字符串... 目录1. 图片编码为 Base64 字符串2. Base64 字符串解码为图片文件3. 示例使用注意

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

python如何生成指定文件大小

《python如何生成指定文件大小》:本文主要介绍python如何生成指定文件大小的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python生成指定文件大小方法一(速度最快)方法二(中等速度)方法三(生成可读文本文件–较慢)方法四(使用内存映射高效生成

c/c++的opencv实现图片膨胀

《c/c++的opencv实现图片膨胀》图像膨胀是形态学操作,通过结构元素扩张亮区填充孔洞、连接断开部分、加粗物体,OpenCV的cv::dilate函数实现该操作,本文就来介绍一下opencv图片... 目录什么是图像膨胀?结构元素 (KerChina编程nel)OpenCV 中的 cv::dilate() 函

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

MybatisX快速生成增删改查的方法示例

《MybatisX快速生成增删改查的方法示例》MybatisX是基于IDEA的MyBatis/MyBatis-Plus开发插件,本文主要介绍了MybatisX快速生成增删改查的方法示例,文中通过示例代... 目录1 安装2 基本功能2.1 XML跳转2.2 代码生成2.2.1 生成.xml中的sql语句头2

使用Python实现调用API获取图片存储到本地的方法

《使用Python实现调用API获取图片存储到本地的方法》开发一个自动化工具,用于从JSON数据源中提取图像ID,通过调用指定API获取未经压缩的原始图像文件,并确保下载结果与Postman等工具直接... 目录使用python实现调用API获取图片存储到本地1、项目概述2、核心功能3、环境准备4、代码实现

python如何下载网络文件到本地指定文件夹

《python如何下载网络文件到本地指定文件夹》这篇文章主要为大家详细介绍了python如何实现下载网络文件到本地指定文件夹,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下...  在python中下载文件到本地指定文件夹可以通过以下步骤实现,使用requests库处理HTTP请求,并结合o