子比主题 – 发布文章前台图片转webp格式功能
这是一款子比主题前台投稿用的webp格式专用，这款功能就是简单说一下吧，就是相当于在前台发布投稿的时候做了一个HTML代码在侧边，然后我们上传图片之后然后点下载webp格式，他会下载本地(不是服务器，是自己电脑/手机)，如果有技术可以自行写插件二开，喜欢的自行部署吧！代码部署
一共是三个地方的代码，话不多说直接开始，先说好，这个是下载到我们本地，需要自己上传发布文章，如果有技术可以自己二开！
这里的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样式即可！
/* 图片转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代码即可！
// 监听图片上传
document.getElementById('imageUpload').addEventListener('change', (e) => {
const file = e.target.files;
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();
});
页:
[1]