没啥好说，直接上代码。
index.html
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
app.vue
<div @click="handler()">测试</div>
<div ref="htmltocanvas">
<div>html转图片</div>
<img width="100%" src="https://jianshu-zhufengli.oss-cn-hongkong.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20200529113808.jpg" />
</div>
export default {
methods: {
handler(){
html2canvas(this.$refs.htmltocanvas,{
allowTaint:true // 允许跨域图像污染画布(重要,默认为false,不设置的话图片显示不出来)
}).then(canvas=>{
// 直接把得到的结果插入文档中
document.body.appendChild(canvas);
})
},
}
}
原结构
image.png
转出来的canvas
image.png
这都是正常的，后面想到把这个canvas转成base64，那必定少不了这个函数canvas.toDataURL()，所以稍微修改一下。
handler(){
html2canvas(this.$refs.htmltocanvas,{
allowTaint:true // 允许跨域图像污染画布(重要,默认为false,不设置的话图片显示不出来)
}).then(canvas=>{
// 直接把得到的结果插入文档中
var base64 = canvas.toDataURL("image/png");
})
},
这时候大家应该都会遇到这个问题
image.png
首先第一步需要设置useCORS:true，设置完之后可以转base64了，但是图片那一块是空白的。
image.png
所以需要对所有需要转成图片的<img>标签添加一个可以跨域的属性crossorigin="anonymous"，这时候可能就会遇到另外一个问题，就是图片显示不出来了。
image.png
这个其实是缓存问题，可以在控制台的network里面看到图片其实是从磁盘缓存从获取的。所以需要给图片加一串字符串，固定的就行，不需要随机，主要是为了避免读取到浏览器缓存中的数据就行。
image.png
<img width="100%" src="https://jianshu-zhufengli.oss-cn-hongkong.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20200529112447.jpg?time=111" crossorigin="anonymous" />
这样，既可以显示出来，又可以转成我们需要的base64了。
image.png
注意，可能有些人还是会遇到跨域问题，这个就是需要服务端来配置了，我这里用的是我的阿里云的图片，所以在阿里云那边需要设置一个跨域配置。
image.png
登录阿里云，进入控制台，找到存储图片的【对象存储】
-
【权限管理】-【跨域设置】
image.png -
【创建规则】
image.png -
填写【来源】【允许的methods】这两个是必填项
image.png 如果是自己的服务器，那就需要在Nginx设置，可以参考这篇文章
这样图片跨域问题就解决啦。
image.png
扩展：图片转base64(最基础案例)
var img = new Image();
img.onload = function(){
var canvas = document.getElementById('tobase64')
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
console.log(dataURL)
}
img.crossOrigin="anonymous"
img.src = 'https://jianshu-zhufengli.oss-cn-hongkong.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20200529112447.jpg?time=4444';
注意要加上一个随便的字符串，不然还是会从浏览器的缓存中获取，缓存数据中不仅仅有图片数据，还有HTTP响应头。
终于把我这么久的困惑解开了。
