其他分享
首页 > 其他分享> > html2canvas 使用方法,uniapp、vue将页面部分转化为图片

html2canvas 使用方法,uniapp、vue将页面部分转化为图片

作者:互联网

1.安装

npm i html2canvas

2.代码

<template>
    <view>
        <view class="print " @click="generatorImage" >
            <span style="font-size: 30px;">打印</span>
        </view>
        <view class="content" ref="addImage">
              <div ref="capture" >
                   需要保存的html页面
                   <image src="../../static/icon/person3.png" mode="widthFix"></image>
              </div>
        </view> 
         <image :src="imgs" mode="widthFix"></image>
        
        
    </view>

</template>

<script>
    import html2canvas from 'html2canvas';
    export default {
        data() {
            return {
               
            }
        },
        onl oad() {},
        mounted() {
            this.generatorImage()
        },
        methods: {
            generatorImage() {
                  html2canvas(this.$refs.capture).then(canvas => {
// this.$refs.addImage.append(canvas);//在下面添加canvas节点 pc端可以转化创建a标签,直接下载 // let link = document.createElement("a"); // link.href = canvas.toDataURL();//下载链接 // console.log(canvas.toDataURL()) // link.setAttribute("download","体检表.png"); // link.style.display = "none";//a标签隐藏 // document.body.appendChild(link); // link.click();
   this.imgs= canvas.toDataURL() //base64字符串 放到图片标签上 }); }, } } </script> <style> </style>

 

 绿色部分是要转化成图片的页面,红色的是转化好的图片。h5长按就可以下载图片了

标签:uniapp,canvas,vue,html2canvas,link,toDataURL,页面,图片
来源: https://www.cnblogs.com/shangrao/p/14899203.html