先说下我要实现的需求: 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 成功就在眼前了啊 .然鹅还是不能成功
楼主抱着只要思想不滑坡 办法总比困难多的心态 继续找度娘
解决图片的跨域问题:把图片的地址转成base64
goodsInfo是生成DOM的数据源,循环数组,目的是想把数组里的ad_img项转成base64 (这样写是有问题,然鹅楼主太年轻了,这个坑等会再填)
心里OS: 成功就在眼前了 啊哈哈哈哈哈啊
为什么会出现canvas被污染了 是因为我之前加了async allowTaint 为ture,意思就是允许跨域,解决了跨域的问题,但是canvas被污染,于是我把这两个属性去掉,图片是能截出来了,但是不全,于是终极版本,emm 终于能转成功了,在安卓上,强调一下 是在安卓
于是测ios,然后我整个人都不好了,ios上根本就没有... 嘤嘤嘤
我的内心是崩溃的 我只是个小前端,为何要这样对我 不写了 我要去厕所哭一会 阿西吧~
痛定思痛,太多坑了,换组件吧
蹬蹬~ domtoimage 登场 github上4k多个星
再说下我的需求啊 我的目的就是要把HTML代码转成图片的base64给后台,最后只是要base64 其他的都不重要,domtoimage 就是一款可以把html转成base64的插件 ps 终于等到你 还好我没放弃
上代码
点击生成截图的时候有闪屏的效果是因为我的样式写的有问题(抽我自己)
domtoimage代码:拿到要生成base64的DOM,然后丢进去,死活没出来,我的内心一万只草泥马崩塌而过啊~
上面加了个dispaly:none 这个元素就隐藏了,所以就用了domtoimage
去掉红框的那个属性,然后就可以生成一坨base64了
激动的都要哭了~~
到目前为止,基本上能实现需求了.
总结:
1,图片转base64的时候要注意的点
img.setAttribute('crossOrigin', 'anonymous');这个一定要在src 前面
img.src = url + '?v=' + Math.random(); // 处理缓存
2, 这一段代码: 递归
场景: 要循环数组,然后拿到数组里面的每一项,用函数来处理每一项(异步),循环完一个然后在去循环另一个,这个时候可以用到递归的写法,这样就能保证了是异步的循环
ps: 我自己最开始的写法是 直接map循环数组的,然后循环调用函数,这样做是有bug的,就是不能保证是不是上一个循环完了才循环的下一个,ps: 啦· 这里相当于是for循环数组,然后用没循环一次,才调用异步函数,也就是这里的dispatchFn