vue中使用html2canvas将HTML内容写入Canvas生成图片

本周有个需求是将HTML渲染好的页面生成图片，用户在微信端使用的时候可以保存到相册。因而一顿搜索猛如虎以后，发现html2canvas这个插件可以解决。由于项目中用到的框架是vue，这里就讨论一下在vue中如何使用html2canvas。

1.安装html2canvas

Install NPM

npm install --save html2canvas
复制代码

Install Yarn

yarn add html2canvas
复制代码

我在这里使用的是1.0.0版本

2.html2canvas生成截图

<template>
    <img :src="htmlUrl" v-show="!isShow" class="canvas-img"/>
    <div ref="imageTofile">
        <div>
            <!须要使用html2canvas绘图的html部分---->
        </div>
    </div>
</template>
<script>
    import html2canvas from 'html2canvas' // 引入html2canvas
    export default {
        data(){
            return {
                htmlUrl:'',//html2canvas绘制好的图片地址  
                isShow:false //在页面dom渲染完毕后让图片显示在用户界面
            }
        },
        methods:{
            toImage () {
                // 第一个参数是须要生成截图的元素,第二个是本身须要配置的参数,宽高等
                html2canvas(this.$refs.imageTofile, {
                    backgroundColor: null,
                    useCORS: true // 解决文件跨域问题
                }).then((canvas) => {
                    let url = canvas.toDataURL('image/png');
                    this.htmlUrl = url;
                    if(this.htmlUrl){
                        this.isShow = true;//绘图完毕让图片显示
                    }
                })
            },
        }
    }
</script>
复制代码

这里有个坑就是在页面没有彻底渲染完毕的状况下，在移动端上下拉动页面会出现页面元素位置不许确或者图片生成不完整的状况，所以加上判断条件，让页面渲染完毕以后使html2canvas绘制好的图片显示出来能够避坑。