Vue下html2canvas的巨坑
时间：2023-04-03 01:13:27
HTML
公司有个前端生成图片的需求。首先想到的是用canvas生成图片。自己画太费时间了！后来在npm上查了一下，这里有html2canvas框架可以使用。附上地址在这里。html2canvas使用起来也很简单，官网有介绍。htmlHelloworld!
jshtml2canvas(document.querySelector("#capture")).then(canvas=>{document.body.appendChild(canvas)});html2canvas(document.querySelector("#capture"){async:true}).then(canvas=>{document.body.appendChild(画布)});如果要配置一些参数，可以传入dom之后，对象会传给官网文档，查看官网文档。我自己的工程环境是vue-cli，会进行webpack打包，在ios下运行，会报错，因为我要生成图片。画布api是toDataURL。这个错误在ios中一直显示是权限问题。ios和safari上的问题是一样的。原因是Canva在dom上绘制图片时，是base64格式的（webpack会把图片压缩到asstes目录下）。解决这个问题花了好几个小时，觉得很不值，所以分享给大家，希望大家不要插手！解决方法是使用同域下的静态目录或文件地址
