页面生成图片dom-to-image,html2canvas(dom转图片)

  • 在传统的H5页面,将dom生成对应的图片

使用到两个第三方库:Android下(dom-to-image),IPhone(html2canvas)

使用方法也很简单,先进行dom-to-image转换,失败的情况进行html2canvas转换,转换的base64结果(这是其中一种形式的结果,还可以转换blob等,大家可以查阅官方文档)

  • 在vue里面怎么做?

我尝试在vue的各个事件钩子里面去获取dom然后进行生成图片的操作,但是都有dom丢失和样式不全的情况。即便是在updated里面进行截图。因为我的需求是,进入页面以后就进行生成图片,这样才能保证用户在微信里面打开网页时,可以长按当前页面弹出保存图片的窗口。(原理就是,会生成一张图片覆盖在当前页面,给用户的感觉还是一个页面,长按时实际就是长按在图片上了)

 

最终的办法:setTimeout,等待页面完全渲染结束,再从dom生成png替换

 

  • 如果是在一般浏览器里面打开,要提供下载图片的功能,也很容易:创建一个a标签,download属性,然后click下就行了
  • 跨域问题解决

我处理的办法是把远程图片的url转成base64编码,具体我是通过node做了一个中间层,核心代码(基于axios)如下:

作者:张雪飞
出处:https://zhangxuefei.site/p/1990
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注