js实现复制图片到微信
2024-06-02 本文已影响0人
每天进步一点点5454
image.png
复制代码即可实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取企业微信客服</title>
<link rel="stylesheet" type="text/css" href="https://cdn.zhangqiaokeyan.com/css/common.css?v=5.7.8">
</head>
<style>
.wechat {
width: 1000px;
margin: 0 auto;
font-size: 35px;
}
.wechat ul li {
width: 100%;
height: 150px;
border-radius: 10px;
background: #dde7fb;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10%;
}
.wechat ul li span {
display: inline-block;
width: 48%;
height: 80px;
background: #eee;
border-radius: 10px;
line-height: 80px;
text-align: center;
}
</style>
<body>
<div class="wechat">
<ul>
<li>111<span onclick="copyHandle(1)">复制企微二维码</span>
<img id="img1" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0" alt="1"
style="opacity: 0; display: none;">
</li>
<li>2<span onclick="copyHandle(2)">复制企微二维码</span>
<img id="img2" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0" alt="2"
style="opacity: 0; display: none;">
</li>
<li>3<span onclick="copyHandle(3)">复制企微二维码</span>
<img id="img3" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0"
alt="3" style="opacity: 0; display: none;">
</li>
<li>4<span onclick="copyHandle(4)">复制企微二维码</span>
<img id="img4" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0" alt="4"
style="opacity: 0; display: none;">
</li>
<li>5<span onclick="copyHandle(5)">复制企微二维码</span>
<img id="img5" src="https://wework.qpic.cn/wwpic3az/977430_xJvIB4zkQnuJ0L4_1702273922/0"
alt="5" style="opacity: 0; display: none;">
</li>
</ul>
</div>
<script type="text/javascript" src="https://cdn.zhangqiaokeyan.com/js/jquery-1.12.4.js"></script>
<script>
// 复制图片，支持jpg，png
function copyHandle(num) {
let oImg = document.getElementById('img' + num)
let url = oImg.src;
var canvas = document.createElement('canvas') // 创建一个画板
let image = new Image()
image.setAttribute("crossOrigin", 'Anonymous') //可能会有跨越问题
image.src = url
image.onload = () => { // img加载完成事件
canvas.width = image.width //设置画板宽度
canvas.height = image.height //设置画板高度
canvas.getContext('2d').drawImage(image, 0, 0); //加载img到画板
let url = canvas.toDataURL("image/png") // 转换图片为dataURL，格式为png
this.clipboardImg(url) // 调用复制方法
}
}
// 从url下载并复制图片，如果是png格式的图片直接调用此方法就能复制成功
async function clipboardImg(url) {
try {
const data = await fetch(url);
const blob = await data.blob();
await navigator.clipboard.write([
new window.ClipboardItem({
[blob.type]: blob
})
]);
alert('复制成功')
} catch (err) {
alert('复制失败')
}
}
</script>
</body>
</html>
