src为base64的图片如何让“右键>复制图片”能在MS Word中粘贴？
问题描述
src为base64的图片在Windows画图等软件中可粘贴，在Word中不能粘贴。
src为url的图片可正常粘贴。
问题出现的环境背景
平台：Win10-LTSC-2019 | CentBrowser(Chromium72) | MS Office 2016
相关代码
这是个图片格式转换器Demo。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background: rgb(248, 249, 250);
}
.button-action,
.button-secondary {
height: 32px;
padding: 8px 16px;
border-radius: 4px;
}
.button-action:focus,
.button-secondary:focus {
outline: none;
}
.button-action {
background: rgb(26, 115, 232);
color: #fff;
border: none;
}
.button-action:hover {
box-shadow: 0px 1px 2px 0px rgba(66, 133, 244, 0.3), 0px 1px 3px 1px rgba(66, 133, 244, 0.15);
}
.button-action:active {
background: rgb(100, 160, 239);
box-shadow: 0px 1px 2px 0px rgba(66, 133, 244, 0.3), 0px 3px 6px 2px rgba(66, 133, 244, 0.15);
}
.card {
position: relative;
height: 75%;
max-height: 600px;
margin: 0 5px;
background-color: #fff;
padding: 15px;
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}
#input {
width: 230px;
}
#input>#input-file {
position: relative;
display: inline-block;
width: 200px;
height: 50px;
padding: 0;
cursor: pointer;
}
#input>#input-file>input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
#input>#input-file>span {
position: absolute;
width: 100%;
height: 100%;
line-height: 50px;
text-align: center;
}
#input>#convert-config {
height: 30px;
width: 200px;
border-radius: 4px;
}
#input>#convert-config:focus {
outline: none;
}
#input>p {
text-indent: 2em;
}
#output {
display: flex;
max-width: 600px;
min-width: 270px;
flex-direction: column;
justify-content: center;
flex-grow: 9;
}
#output>img {
max-width: 100%;
max-height: 100%;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}
</style>
<title>Image Converter</title>
</head>
<body>
<div id="input" class="card">
<span id="input-file" class="button-action">
<span>拖拽图片文件到此处</span>
<input type="file">
</span>
<br>
<br>
<select id="convert-config">
<option value="jpeg">转换为 JPEG 格式（有损）</option>
<option value="png">转换为 PNG 格式（无损）</option>
</select>
<br>
<br>
<p>拖拽图片文件到上方蓝色按钮，右侧卡片将输出转换后的图片。</p>
<p>右键转换后的图片，点击“复制图片”即可直接在文档中粘贴图片；点击“图片另存为”可以保存转换后的图片文件。</p>
</div>
<div id="output" class="card"><img></div>
<script>
'use strict';
async function convertImageAsync(base64, targetType, quality) {
return new Promise(resolve => {
let img = new Image();
img.onload = () => {
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
resolve(canvas.toDataURL(targetType, quality));
};
img.src = base64;
});
}
document.querySelector('#input-file>input').addEventListener('change', event => {
let type = document.querySelector('#convert-config').value;
let meta = '';
let quality = 0;
switch (type) {
case 'jpeg':
meta = 'image/jpeg';
quality = 0.75;
break;
case 'png':
meta = 'image/png';
quality = 1;
break;
}
let fileReader = new FileReader();
fileReader.onload = async (e) => {
let base64 = await convertImageAsync(e.target.result, meta, quality);
document.querySelector('#output>img').src = base64;
};
fileReader.readAsDataURL(event.target.files[0]);
});
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论