美文网首页
如何使用html2canvas将HTML页面转换为图片?

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

作者: cs0710 | 来源:发表于2019-02-18 15:19 被阅读29次

    实质是将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页面转换为图片?

          本文链接:https://www.haomeiwen.com/subject/gjiaeqtx.html