1.引入html2canvas.js(可以npm,也可以直接引入包http://cdn.bytedance.com/?query=html2canvas&version=1.4.1)
2.使用
（1）html:codeContent是要轉(zhuǎn)成圖片的dom元素慷蠕，content是要生成的圖片的區(qū)域
// 需要轉(zhuǎn)成圖片的元素
<view class="codeContent" >
<view class="img_wrap">
<view class="img_wrap__head">{{ creatData.couponName }}</view>
<view class="">
<ay-qrcode ref="qrcode" qrcode_id="qrcode" :modal="modal_qr":url="creatData.qrCodeUrl"
@hideQrcode="hideQrcode" :height="300" :width="300" ></ay-qrcode>
</view>
<view class="img_wrap_date"
>請于 {{ creatData.couponExpiredTime }} 前使用
</view>
</view>
</view>
// 生成圖片的區(qū)域
<view class="content" ></view>
<button class="uni-button" :class="'bg-' + themeColor.name" size="mini" @click="downImg" > 保存二維碼</button>
（2）css
.codeContent{
height: 900rpx;
width: 620rpx;
}
//設置成跟codeContent等寬高，
.content{
height: 900rpx;
width: 620rpx;
position: absolute; // 這里是因為業(yè)務不需要讓content展位腕铸，可不加
}
(3) js
downImg() {
html2canvas(document.querySelector('.codeContent')).then(canvas => {
const imgUrl = canvas.toDataURL('image/jpeg')
const image = document.createElement('img')
image.src = imgUrl
// 將生成的圖片放到 類名為 content 的元素中
document.querySelector('.content').appendChild(image)
const a = document.createElement('a')
a.href = imgUrl
// a.download 后面的內(nèi)容為自定義圖片的名稱
a.download = 'code_download'
a.click()
})
},
