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);

 

 
posted on 2018-04-09 22:12  文方草  阅读(39556)  评论(15编辑  收藏  举报