全国服务热线:4008-888-888

技术知识

浅谈挪动端网页页面照片预载入计划方案

因为企业业务流程必须,vue制做的网页页面必须联接智能化家居的wifi,但是这类wifi是沒有联接互联网技术的,仅用于手机上与家居的连接。这样,就致使了网页页面在这类wifi下没法载入服务器上的照片。

就此,对于vue单网页页面系统软件,我想出来3种计划方案。

1.在上1页先载入照片,缓存文件起来,后边的断网页页面面就可以拿到了。

2.做1个网页页面,上方是路由器器皿,置放断网后的网页页面,正下方是必须显示信息的所有照片。这样网页页面载入时,照片就所有出来了,上方的子路由器当然能拿到照片。

3.把照片变换成base64数据信息储存在localStorage。

第1、2种计划方案较为简易,在pc上和安卓系统服务平台上主要表现优良。但是在ios上却无法显示。

(明明照片都在正下方了,上面的却死活无法显示)

由此推断,ios系统软件类访问器对照片的载入是1个萝卜1个坑的。载入每一个照片前会先嗅探其是不是在服务器上,存在且未更改便是用缓存文件显示信息,没寻找就立即404了。因而根据访问器的缓存文件对策在断网的状况下其实不理想化。,必须应用第3种计划方案。先贴上编码:

  /*  获得照片的base64码
        * @param {obj}img照片dom目标
         * */
        function getBase64Image(img) {
          let canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;
          let ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, img.width, img.height);  //绘图同样照片
          return canvas.toDataURL("image/png"); //变换成base64数据信息
        }

运用canvas能够很非常容易完成把照片变换成base64文件格式。以后要是储存在sessionStorage里边便可以了。以后再次显示信息照片时,要是设定img的src特性为base64数据信息便可以了。我在vue新项目里边的做法是,建立1个用于变换和储存base64的组件,把slot里边的照片所有变换成base64,并为img标识建立name特性并做为sessionStorage的key;再建立1个组件做为显示信息组件(只包括1个img标识),设定其name特性和其对应的照片的1样,做为key来取下sessionStorage的base64数据信息就ok了。

变换和储存组件:

  <!--必须预载入的照片-->
    <save-img-base64>
      <img src="../../assets/img/connect/bind_xiaofang.png" name="bind_xiaofang"/>
      <img src="../../assets/img/connect/bind_allonePro.png" name="bind_allonePro"/>
      <img src="../../assets/img/connect/bind_S20.png" name="bind_S20"/>
      <img src="../../assets/img/connect/bind_S30.png" name="bind_S30"/>
      <img src="../../assets/img/connect/connectStart_xiaofang.png" name="connectStart_xiaofang"/>
      <img src="../../assets/img/connect/connectStart_allonePro.png" name="connectStart_allonePro"/>
      <img src="../../assets/img/connect/connectStart_S20.png" name="connectStart_S20"/>
      <img src="../../assets/img/connect/connectStart_S30.png" name="connectStart_S30"/>
      <img src="../../assets/img/connect/reset_xiaofang.png" name="reset_xiaofang"/>
      <img src="../../assets/img/connect/reset_allonePro.png" name="reset_allonePro"/>
      <img src="../../assets/img/connect/reset_S20.png" name="reset_S20"/>
      <img src="../../assets/img/connect/reset_S30.png" name="reset_S30"/>
      <img src="../../assets/img/connect/network_set.png" name="network_set"/>
      <img src="../../assets/img/connect/phone_wifi.png" name="phone_wifi"/>
      <img src="../../assets/img/connect/tmall.png" name="tmall"/>
    </save-img-base64>

显示信息组件:

<img-base64 name="network_set"></img-base64>

访问器sessionStorage状况:

从Can I use的报表中能够看出,当代手机上访问器基础适配canvas,大伙儿能够安心应用。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服