文章详情
html+js获取剪切板图像并缩放得到base64编码url
Posted on 2023-06-20 12:16:44 by 主打一个C++
//剪切板的任何图片粘贴进去，按照代码规定自动缩放图像，得到base64编码的图像url
完整代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘贴图片示例</title>
<style>
#pasteArea {
border: 1px solid #ccc;
width: 300px;
height: 200px;
position: relative;
overflow: auto; /* 溢出时显示滚动条 */
}
img {
max-width: 100%; /* 确保图片不会超出容器宽度 */
max-height: 100%; /* 确保图片不会超出容器高度 */
}
</style>
</head>
<body>
<h1>在下面粘贴图片（高度大于256px时自动缩放，宽度保持比例自动缩放）</h1>
<!-- 首页展示图 -->
<style>
#pasteArea_zoom {
border: 1px solid #ccc;
width: 100%;
height: auto;
position: relative;
overflow: auto; /* 溢出时显示滚动条 */
min-height: 128px; /* 设置最小高度 */
margin-bottom: 10px;
}
</style>
<span style="color: #fff;">首页展示图（粘贴修改/添加）</span>
<div id="pasteArea_zoom" contenteditable="true">
<img id="zoomicon" src="" alt="首页展示图">
</div>
<script>
const pasteArea = document.getElementById('pasteArea_zoom');
pasteArea.addEventListener('paste', (event) => {
event.preventDefault(); // 阻止默认行为
const items = event.clipboardData.items;
for (const item of items) {
if (item.kind === 'file') {
const file = item.getAsFile();
const reader = new FileReader();
reader.onload = (event) => {
const img = new Image(); // 创建图片对象
img.src = event.target.result;
img.onload = () => {
let newWidth = img.width;
let newHeight = img.height;
// 判断图片高度
if (img.height > 256) {
const scale = 256 / img.height; // 计算缩放比例
newHeight = 256; // 设置新的高度
newWidth = img.width * scale; // 按比例调整宽度
}
// 使用 canvas 进行实际的图像缩放
const canvas = document.createElement('canvas');
canvas.width = newWidth; // 设置canvas的新宽度
canvas.height = newHeight; // 设置canvas的新高度
const ctx = canvas.getContext('2d');
// 在canvas上绘制缩放后的图像
ctx.drawImage(img, 0, 0, newWidth, newHeight);
// 获取缩放后的图像数据URL，设置JPEG质量为0.7（70%）
const dataURL = canvas.toDataURL('image/jpeg', 1.0);
document.getElementById("zoomicon").src = dataURL;
};
};
reader.readAsDataURL(file); // 将文件读取为 data URL
}
}
});
</script>
</body>
</html>
*转载请注明出处：原文链接：https://cpp.vin/page/63.html
