base64编码图片在线提取与保存
概述
随着互联网的发展，图片的分享和使用变得越来越频繁。然而，在很多情况下，我们可能会遇到带有水印的图片，这限制了图片的二次利用。为了解决这个问题，本文将介绍一个简单的网页应用，它能够帮助用户从文本中提取Base64编码的图片，并提供下载功能，从而实现无水印图片的保存。
网页结构
该网页应用的基础HTML5文档类型声明为<!DOCTYPE html>，确保页面在所有现代浏览器中以标准模式渲染。整个页面的默认语言设置为中国大陆简体中文（lang="zh-CN"），以便更好地支持中文用户。
头部信息
字符集：通过
<meta charset="UTF-8">定义了页面使用的字符编码为UTF-8，保证页面能正确显示各种语言的字符。标题：
<title>标签内设置了页面标题为“图片提取与保存”，这个标题会显示在浏览器的标签页上。
样式设计
为了提升用户体验，页面采用了简洁美观的CSS样式：
全局样式：设置了页面字体、背景颜色、边距和内边距，使得页面看起来更加整洁。
容器：
.container类用于创建一个居中的内容区域，有白色背景、圆角和阴影效果，给用户带来视觉上的舒适感。输入框：
#inputBox是一个多行文本输入框，用户可以在此粘贴包含Base64编码的图片数据。按钮：提供了两个按钮——“提取”和“保存图片”。点击“提取”按钮后，页面会尝试解析用户粘贴的文本并显示预览图片；点击“保存图片”按钮，则可以将预览的图片下载到本地。
预览图片：
#previewImage用于展示从文本中提取出来的图片，同时设置了最大宽度以确保图片不会过大影响页面布局。
功能实现
该网页应用的核心功能是通过JavaScript来实现的：
提取图片：
extractImage()函数首先获取用户在textarea中输入的内容，然后使用正则表达式匹配出符合Base64编码格式的字符串。如果找到了匹配项，就将其作为图片源设置给<img>元素；如果没有找到或格式不正确，则会弹出警告提示。保存图片：
saveImage()函数检查是否已有图片被加载到<img>元素中。如果有，它会创建一个临时的<a>元素，将图片的src属性值设置为链接地址，并添加download属性指定下载文件名。之后模拟点击这个链接触发下载操作，最后移除这个临时元素。
使用方法
用户打开网页后，可以在提供的文本框中粘贴包含Base64编码的图片数据。
点击“提取”按钮，系统会自动分析输入内容并尝试加载图片进行预览。
如果图片成功加载，用户可以点击“保存图片”按钮将图片下载到本地，且下载的图片不含任何水印。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片提取与保存</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#inputBox {
width: 100%;
height: 150px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
.button-container {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#previewImage {
max-width: 300px; /* 调整预览图片的最大宽度 */
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<div>
<h1>无水印下载~</h1>
<textarea id="inputBox" placeholder="粘贴图片数据"></textarea><br>
<div>
<button onclick="extractImage()">提取</button>
<button onclick="saveImage()">保存图片</button>
</div>
<img id="previewImage" src="" alt="预览图片">
</div>
<script>
function extractImage() {
const input = document.getElementById('inputBox').value;
const base64Data = input.match(/data:image\/[^;]+;base64,([^"]+)/);
if (base64Data) {
document.getElementById('previewImage').src = base64Data[0];
} else {
alert('无效的Base64编码');
}
}
function saveImage() {
const image = document.getElementById('previewImage');
if (image.src) {
const link = document.createElement('a');
link.href = image.src;
link.download = 'image.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
alert('没有图片可供保存');
}
}
</script>
</body>
</html>效果图如下
