标签：uniapp canvas vue html2canvas link toDataURL 页面 图片

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。