Chrome插件：图片缩放为头像（128*128）
前置条件：安装有chrome谷歌欣赏器的电脑
利用步调：
1.打开chrome扩展插件https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMmMwM2Y0MWFiZTMwNGM5YTgwNzFkNzYwNjcwYjU1Y2MucG5n
2.点击管理扩展步伐
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMWJlOTJjY2EwMjQ5NDkwNmFkZWQ3OGJlZmFkOGE1ODgucG5n
3.加载已解压的扩展步伐
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMjRiNTZiZmY4MjVhNGZmYzg1ZDEyM2I4MDM1OThmMzgucG5n
4.选择对应文件夹
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZGIyYjQ2MjU0NjY1NDU5Zjg1OWFhYTUzMDgxOGUyZDAucG5n
5.乐成后会出现一个扩展小步伐
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMTczMzk1ZTRmNjE1NGU0MTkyZmMwNTM1YmFhODc4YTQucG5n
6.点击对应小步伐
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNzg1NjNlZjhkYzU0NDBiNDhlODVmZTY0ZjYxMjYxYTEucG5n
7.利用小步伐
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNGRkYzNkMzU2YTllNDM3ZTg4ODhiY2MyOTA3MDU0NjMucG5n
8.拖拽乐成后会自动生存到下载
代码：
1.manifest.json
{
"manifest_version": 3,
"name": "图片缩放器",
"version": "1.0",
"description": "将图片缩放至128x128像素",
"permissions": [
"contextMenus",
"downloads"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
}
} 2.popup.js
document.addEventListener('DOMContentLoaded', function() {
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
// 点击上传区域触发文件选择
dropZone.addEventListener('click', () => {
fileInput.click();
});
// 处理拖拽事件
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('dragover');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('dragover');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0) {
handleImage(files);
}
});
// 处理文件选择
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
handleImage(e.target.files);
}
});
// 处理图片
function handleImage(file) {
if (!file.type.startsWith('image/')) {
alert('请选择图片文件！');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
// 创建canvas进行缩放
const canvas = document.createElement('canvas');
canvas.width = 128;
canvas.height = 128;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 128, 128);
// 显示预览
preview.src = canvas.toDataURL();
preview.style.display = 'block';
// 下载图片
canvas.toBlob((blob) => {
const filename = 'resized_' + file.name;
chrome.downloads.download({
url: URL.createObjectURL(blob),
filename: filename
});
});
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
}); 3.popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
width: 300px;
padding: 10px;
}
#dropZone {
width: 280px;
height: 150px;
border: 2px dashed #ccc;
text-align: center;
padding: 20px;
margin: 10px 0;
}
#dropZone.dragover {
background: #e1e1e1;
border-color: #999;
}
#preview {
max-width: 280px;
margin-top: 10px;
}
</style>
</head>
<body>
<h3>图片缩放器</h3>
<div id="dropZone">
拖拽图片到这里或点击上传
<input type="file" id="fileInput" accept="image/*" style="display: none;">
</div>
<img id="preview" style="display: none;">
<script src="popup.js"></script>
</body>
</html> 4.background.js
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "resizeImage",
title: "缩放至128x128",
contexts: ["image"]
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "resizeImage") {
const imgUrl = info.srcUrl;
// 创建一个临时的图片元素
const img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function() {
// 创建canvas
const canvas = new OffscreenCanvas(128, 128);
const ctx = canvas.getContext("2d");
// 绘制缩放后的图片
ctx.drawImage(img, 0, 0, 128, 128);
// 转换为blob
canvas.convertToBlob().then(blob => {
// 下载文件，移除 saveAs 选项使其自动下载
const filename = "resized_" + imgUrl.split("/").pop();
chrome.downloads.download({
url: URL.createObjectURL(blob),
filename: filename
});
});
};
img.src = imgUrl;
}
});
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]