一、前言
我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。
注意：版本比较多，这里介绍最新版
二、代码
1. 安装
现在最新的版本应该是1.0.0，另外还有一个比较经典的版本是0.5.0，网上有许多关于这个版本的bug说明。
slot里面是你需要转化为图片的DOM元素。
dataURL是最后转化出来的图片base64地址，放在img标签中即可展示。
html2canvas的用法非常简单，不过1.0.0已经将写法改为了promise，在.then方法里获取canvas对象。
在配置项里配置backgroundColor: null即可。
这是最常见的一个bug，就是这个插件无法生成跨域了的图片，也看了官方文档配置了也百度了都没有好的办法，最后是让后端直接把跨域的图片转成base64，就完美解决了这个问题。
先让生成的图片隐藏，等生成好以后再展示。（没有在手机上测试，效果不一定令人满意）
使用
html
js
<a class="attachment" href="https://www.f2er.com/public/api.php?app=files&do=download&file=bVbghPZ&t=1732323470" target="_blank" title="点击下载[clipboard.png]">clipboard.png</a>
html2canvas(document.querySelector("#capture") {
async: true
}).then(canvas => {
document.body.appendChild(canvas)
});
如果你要配置一些参数可以在传入dom的后面进行 object 传参 官网文档可查
我自己的工程环境是vue-cli会进行webpack打包在ios下运行的时候会出现错误因为我要生成一张图片是的canvas api 是 toDataURL
这错误在ios一直显示是权限问题 在ios 和safari 上的问题是一致的 原因是canva绘制dom上的图片的时候是 base64的格式（webpack会对asstes目录下的图片进行压缩）花费了几个小时才解决这个问题，感觉很不值所以分享给大家希望大家别踩进去了！解决方法是可以 static目录或者同域下的文件地址
原文链接：https://www.f2er.com/vue/30297.html