<script src="./html2canvas.js"></script>
<div id="target">
<ol style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;" class="list-paddingleft-1">
<li>
<p>递归遍历 DOM 树:</p>
</li>
<li>
<img src="./2.png" alt="">
</li>
</ol>
</div>
<script>
function copyDivToImage() {
const element = document.getElementById("target")
html2canvas(element).then(canvas => {
canvas.toBlob(
async (blob) => {
try {
// 复制到剪贴板
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob
})
])
console.log("复制ok")
} catch (err) {
console.error("复制false", err)
}
},
"image/png", // 文件格式
1 // 压缩质量 0-1
)
})
}
setTimeout(() => {
copyDivToImage()
}, 1000)
</script>
浏览器剪贴板对 jpeg的支持不大好, canvas.toBlob() 的参数改成了 "image/png”.
766

被折叠的 条评论
为什么被折叠?



