思路: 用htmlCanvas把 海报内容 绘制成图片 ,生成后弹窗展示图片,长按触发系统的保存
先 npm install --save html2canvas
//保存按钮
<view @click="convert2canvas">
保存到相册
</view>
//需要绘制成图片的内容
<view id="htmlCanvas" ref="imgCanvas">
<view> 自定义内容 </view>
</view>
//弹窗
<u-popup class="post" :show="show" mode="center" @close="close" >
<view style="width: 100%;height: 500px;">
//生成的图片
<image :src="canvasImg" style="height: 100%;" mode="scaleToFill"></image>
</view>
/* <view >
长按保存图片到相册
</view> */
</u-popup>
/*JS部分*/
//引入 html2canvas
import html2canvas from 'html2canvas'
//生成图片
convert2canvas() {
let shareContent = document.getElementsByClassName('post')[0];
let opts = {
useCORS: true
};
html2canvas(shareContent, opts).then((canvas) => {
let imgSrc = canvas.toDataURL('image/png')
this.canvasImg = imgSrc
this.show=true
});
},