子比主题 – 发布文章前台图片转webp格式功能

飞流 · 发表于 2025-10-10 18:11:19

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

这是一款子比主题前台投稿用的webp格式专用，这款功能就是简单说一下吧，就是相当于在前台发布投稿的时候做了一个HTML代码在侧边，然后我们上传图片之后然后点下载webp格式，他会下载本地(不是服务器，是自己电脑/手机)，如果有技术可以自行写插件二开，喜欢的自行部署吧！

tengfei_down - 2025-10-10T180951.996.webp

tengfei_down - 2025-10-10T180951.996.webp

代码部署

一共是三个地方的代码，话不多说直接开始，先说好，这个是下载到我们本地，需要自己上传发布文章，如果有技术可以自己二开！

HTML代码

这里的HTML的代码我们定位：WP后台–>>外观–>>小工具–>>自定义HTML，将下面的代码放里面，然后我们把这个小工具放到：前台投稿-侧边栏顶部

<div id="webpConverter" class="card">
<div class="upload-area">
<input type="file" id="imageUpload" accept="image/*" />
<label for="imageUpload">选择图片文件</label>
</div>
<div class="image-preview">
<div id="previewPlaceholder">图片预览</div>
<img id="imagePreview" style="display:none;" />
</div>
<button id="convertBtn" class="convert-btn" disabled>转换为 WebP</button>
<a id="downloadLink" class="download-link" style="display:none;" download="">下载 WebP 图片</a>
</div>

复制代码

CSS代码

CSS代码直接丢到：子比主题–>>自定义CSS样式即可！

/* 图片转webp小工具*/
.webp-converter {
background-color: #f7f7f7;
padding: 20px;
margin: 20px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
.upload-area {
margin-bottom: 15px;
text-align: center;
}
#imageUpload {
display: none;
}
.upload-area label {
display: inline-block;
padding: 10px 20px;
background-color: #00acb0;
color: white;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.upload-area label:hover {
background-color: #008c9e;
}
.image-preview {
text-align: center;
margin-bottom: 15px;
}
#previewPlaceholder {
padding: 50px;
background-color: #e5e5e5;
color: #666;
font-style: italic;
}
#imagePreview {
max-width: 100%;
height: auto;
margin: 0 auto;
}
.convert-btn {
display: block;
width: 100%;
padding: 10px;
background-color: #00acb0;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.convert-btn:hover {
background-color: #008c9e;
}
.download-link {
display: block;
margin-top: 10px;
text-align: center;
text-decoration: underline;
color: #00acb0;
cursor: pointer;
}

复制代码

JS代码

JS代码直接丢到：子比主题–>>自定义JS代码即可！

// 监听图片上传
document.getElementById('imageUpload').addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (event) => {
const img = document.getElementById('imagePreview');
img.src = event.target.result;
img.style.display = 'block';
document.getElementById('previewPlaceholder').style.display = 'none';
document.getElementById('convertBtn').disabled = false;
};
reader.readAsDataURL(file);
});
// 图片转换为 WebP 并下载
function convertImageToWebP() {
const img = document.getElementById('imagePreview');
if (!img.src) return;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
canvas.toBlob((blob) => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'converted_image.webp';
a.click();
URL.revokeObjectURL(a.href);
}, 'image/webp');
}
// 绑定按钮点击事件并防止页面刷新
document.getElementById('convertBtn').addEventListener('click', (e) => {
e.preventDefault();
convertImageToWebP();
});

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 发布文章前台图片转webp格式功能

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn