html2canvas截屏在H5微信移动端踩坑，ios和安卓均可显示

1.最近在做移动端开发，框架是vue，一产品需求是，后台返回数据，通过qrcode.js(代码比较简单，百度上已经很多了)生成二维码，然后通过html2canvas，将html元素转化为canvas,通过 canvas.toDataURL() 方法转化为base64，二进制流的图片，显示在页面上，因为微信内置浏览器不支持下载（可能是我不会，谁实现了可以教一下我)，需要用户触屏手动保存图片。下面贴出部分代码

 

2.

<template>
    <section id="section">
　　<p>当前积分<span>365</span></p>
　　<p>参与项目数量<span>12</span></p>
　　<p>募捐金额<span>45678</span>元</p>
　　<p>荣誉等级<span>海绵宝宝</span></p>
　　<div id="qrcode">
　　</div>
    </section>
    <div id='photo'>
　　<span>长按图片保存和分享</span>
    </div>
　<button @click="saveImg">生成图片</button>
</template>
<script>
　　export default{
　　　　methods:{　
　　　　　　saveImg(){
　　　　　　　　var shareContent = document.getElementById("section");
　　　　　　　　html2canvas( shareContent,{
　　　　　　　　　　onrendered: function(canvas){
　　　　　　　　　　var img = new Image();
　　　　　　　　　　img.src = canvas.toDataURL() ;
　　　　　　　　　　document.getElementById("photo").appendChild(img);
　　　　　　　　　　
　　　　　　　　}
　　　　　　})
　　　　}
      }
</script>

3.当然前提是先引入html2canvas文件，我直接在index.html 引入CDN 地址是

　　

<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>

不要问我为什么不用最新 0.5.0版本，网上有人说坑比较多，我项目赶进度，没来得及去踩坑，你们想尝试也可以玩玩。

 

4.然而，通过上述代码，PC端，包括开发者工具均可显示生成的图片，移动端安卓系统也能正常显示和保存。然而，坑坑的IOS图片区域一片空白；于是，本人开始漫长的百度之旅

 

5.说法1：ios显示base64图片，需要去除格式前缀

　我们通过控制台，可以看到canvas.toDataURL() 出来的格式，img src 可以直接显示 "data:image/png;base64,iVBORw0KGgoAAAANSU.....==="格式的图片，但是ios需要去除　data:image/png;base64　前缀，于是我通过以下判定，当是IOS系统时，去除前缀

　　　

　var u = navigator.userAgent, app = navigator.appVersion;
　　　　var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
　　　　var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
　　　　if (isAndroid) {
　　　　　　//这个是安卓操作系统
　　　　　　mg.src = canvas.toDataURL() ;
　　　　}
　　　　if (isIOS) {
　　　　　　//这个是ios操作系统
　　　　　　mg.src = canvas.toDataURL() .replace("data:image/png;base64,","");
　　　　}

然而开发者工具调为IOS手机，也出现系统报错，可以发现，去除前缀，浏览器会自动添加地址前缀。所以，这种解决办法失败。接着来

 

 

6.说法2，首先在页面添加img,通过给src赋值，完成，而不是appendChild

　　

　

<div id='photo'>
　　<span>长按图片保存和分享</span>
　　<img src=""  id="img">
    </div>
　　..
　　
　　html2canvas( shareContent,{
　　　　onrendered: function(canvas){
　　　　　　document.getElementById("img").src = canvas.toDataURL() ;
　　　　}
　　}

　　当然，结果依旧是空白一片 

 

7.说法3，无效

 　　

document.getElementById("img").src = canvas.toDataURL() .replace("image/png", "image/octet-stream") ;

 

8.说法4，blob格式生成http URL地址格式显示

　和说法1有点相关，当去掉IMG格式前缀，SRC会添加域名，显示地址，那我们直接显示地址行不行，有人通过后台完成，但是，太过复杂。尝试blob格式生成http URL？

　　

function dataURLtoBlob(dataurl) {
　　　　var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
　　　　while(n--){
　　　　　　u8arr[n] = bstr.charCodeAt(n);
　　　　}
　　 　  return new Blob([u8arr], {type:mime});
　　 }
　　let dataUrl = dataURLtoBlob(canvas.toDataURL()) ;
　document.getElementById("img").src = URL.createObjectURL(dataUrl);

　这样，IMG的SRC显示就不是base64格式，而是http格式的URL，但是，ios依然无法显示图片

8.做到这里，我产生了让后端帮助的念头，但随后放弃了，于是开始整理思路，我一直觉得是ios不支持base64格式图片，网上也有人说是ios11无法显示html2canvas.然而通过第四种借助http url的方法，还是没有成功，于是我开始思考是不是其他地方出现的问题。搜索了很多文章，忽然一个说法让我觉得很有可能是解决办法，那就是，ios系统无法动态给img src赋值，可以通过div 显示背景的方式显示图片。但是，即使可以成功，也完不成我这个项目功能，因为作为背景图的话，用户无法触屏保存图片...而，这里，就体现了框架相对原生JS的好处，我可以通过v-bind绑定src 再给data赋值的方式。激动的我赶紧尝试。

<template>
    <section id="section">
　　<p>当前积分<span>365</span></p>
　　<p>参与项目数量<span>12</span></p>
　　<p>募捐金额<span>45678</span>元</p>
　　<p>荣誉等级<span>海绵宝宝</span></p>
　　<div id="qrcode">
　　</div>
    </section>
    <div id='photo'>
　　<span>长按图片保存和分享</span>
　　<img :src="url">
    </div>
　<button @click="saveImg">生成图片</button>
</template>
<script>
　　export default{
　　　　data(){
　　　　　　return{
　　　　　　　　url:""
　　　　　　}
　　　　},　　　　
　　　　methods:{　
　　　　　　saveImg(){
　　　　　　　　var shareContent = document.getElementById("section");
　　　　　　　　html2canvas( shareContent,{
　　　　　　　　　　onrendered: function(canvas){
　　　　　　　　　　this.url = canvas.toDataURL() ;　　　　　　　　
　　　　　　　　}
　　　　　　})
　　　　}
      }
</script>

 

大功告成！嗯...最后的原因只是因为ios不支持直接给img src赋值，
当然，还可以优化，比如加入截屏声音。

　

　//添加快门声音
　　var audio = document.createElement("audio");
　　audio.src = "/static/1374.wav";
　　audio.autoplay = "autoplay" ;
　　photo.appendChild(audio);
　　setTimeout(()=>{
　　　　photo.removeChild(audio);
　　},2000);