先说下我要实现的需求： h5端做一个商品或者是图片的分享， 简单的来说 就是html页面转为图片分享到微信或者微博的功能
前端html代码转图片，第一个想到的当然是canvas 于是各种百度一波 接下来是漫漫入坑之路~
html2canvas
百度一波后找到了html2canvas， 官网http://html2canvas.hertzen.com/
官方文档doem以及api很是简单粗暴
于是乎楼主我，满心欢喜的拿起键盘就是一顿噼里啪啦写
第一次尝试： target就是DOM结构，我要把这个DOM结构转成canvas 然后再把canvas转成base64，因为我的DOM结构中的img的src是拿后台返回回来的地址；
因为图片是线上的地址，html2canvas转canvas的时候会出现跨域的情况，各种百度后，看官网文档加了allowTaint，async 这两货为ture，完美解决跨域问题，心里os 成功就在眼前了啊 .然鹅还是不能成功
图片的意思是跨域，心里MMP啊，img标签的src不是天生自带跨域功能嘛
楼主抱着只要思想不滑坡 办法总比困难多的心态 继续找度娘
解决图片的跨域问题：把图片的地址转成base64
goodsInfo是生成DOM的数据源，循环数组，目的是想把数组里的ad_img项转成base64 （这样写是有问题，然鹅楼主太年轻了，这个坑等会再填）
心里OS: 成功就在眼前了 啊哈哈哈哈哈啊
卧槽了！ 报错的意思是说 canvas被污染了，用了不那些自带的方法
为什么会出现canvas被污染了 是因为我之前加了async allowTaint 为ture,意思就是允许跨域，解决了跨域的问题，但是canvas被污染，于是我把这两个属性去掉，图片是能截出来了，但是不全，于是终极版本，emm 终于能转成功了，在安卓上，强调一下 是在安卓
于是测ios，然后我整个人都不好了，ios上根本就没有... 嘤嘤嘤
我的内心是崩溃的 我只是个小前端，为何要这样对我 不写了 我要去厕所哭一会 阿西吧~
痛定思痛，太多坑了，换组件吧
蹬蹬~ domtoimage 登场 github上4k多个星
再说下我的需求啊 我的目的就是要把HTML代码转成图片的base64给后台，最后只是要base64 其他的都不重要，domtoimage 就是一款可以把html转成base64的插件 ps 终于等到你 还好我没放弃
上代码
html结构，图片有闪屏的bug，于是乎就在这里加了个我红框圈出来的属性，真是no 做 no die
点击生成截图的时候有闪屏的效果是因为我的样式写的有问题（抽我自己）
domtoimage代码：拿到要生成base64的DOM,然后丢进去，死活没出来，我的内心一万只草泥马崩塌而过啊~
上面加了个dispaly:none 这个元素就隐藏了，所以就用了domtoimage
去掉红框的那个属性，然后就可以生成一坨base64了
激动的都要哭了~~
这里主要是拿到base64，剩下的业务是要把这个base64给后台
到目前为止，基本上能实现需求了.
总结：
1，图片转base64的时候要注意的点
img.setAttribute('crossOrigin', 'anonymous');这个一定要在src 前面
img.src = url + '?v=' + Math.random(); // 处理缓存
img.setAttribute('crossOrigin', 'anonymous');
2， 这一段代码： 递归
场景： 要循环数组，然后拿到数组里面的每一项，用函数来处理每一项（异步），循环完一个然后在去循环另一个，这个时候可以用到递归的写法，这样就能保证了是异步的循环
ps: 我自己最开始的写法是 直接map循环数组的，然后循环调用函数，这样做是有bug的，就是不能保证是不是上一个循环完了才循环的下一个，ps: 啦· 这里相当于是for循环数组，然后用没循环一次，才调用异步函数，也就是这里的dispatchFn
网友评论