如何使用html2canvas将HTML页面转换为图片?

实质是将html转换为canvas,再讲canvas转化为图片的url
需要的api有两个,一个是html2canvas(),一个是toDataURL()

  • 引入html2canvas插件

    import html2canvas from 'html2canvas'
    
  • 将指定的html元素,搭配参数转换为canvas,options是配置的canvas的样式

    const options = {
        // backgroundColor: null
    }
    const res = await html2canvas(this.$refs.txtDetail, options)
    
  • 将生成的canvas转换为url的base64的格式

    const base64Url = canvas.toDataURL("image/png") 
    

你可能感兴趣的:(如何使用html2canvas将HTML页面转换为图片?)