一、安裝?html2canvas
在項(xiàng)目安裝庫 html2canvas文章來源：http://www.zghlxwxcb.cn/news/detail-795526.html
npm i html2canvas二、生成圖片
在頁面局部加載?html2canvas 庫，調(diào)用方法生成文章來源地址http://www.zghlxwxcb.cn/news/detail-795526.html
<template>
<div class="page-box">
<div class="text-box">文本轉(zhuǎn)圖片</div>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
data() {
return {}
},
mounted() {
this.$nextTick(async () => {
const element = document.querySelector('.text-box')
const canvas_box = await html2canvas(element) // 生成canvas
const img_url = canvas_box.toDataURL('image/png') // 轉(zhuǎn)圖片地址base64
const a_tag = document.createElement('a')
a_tag.href = img_url
a_tag.download = 'test.png'
a_tag.click()
})
},
methods: {}
}
</script>
<style lang="less" scoped></style>到了這里，關(guān)于Vue生成圖片并下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
