因为企业业务流程必须，vue制作的网页页面必须联接智能化家居家具的wifi，但是这类wifi是沒有联接互连网的，仅用以手机上与家居家具的连接。那样，就造成了网页页面在这里种wifi下没法载入网络服务器上的照片。

从此，对于vue宣传单页面系统软件，我觉得出去3种计划方案。

1.在上一页先载入照片，缓存文件起來，后边的断开连接网页页面就可以取得了。

2.做一个网页页面，上边是路由器器皿，置放断开连接后的网页页面，正下方是必须显示信息的所有照片。那样网页页面载入时，照片就所有出去了，上边的子路由器当然能取得照片。

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

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

(本来照片都会正下方了，上边的却死活无法显示)

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

 /* 获得照片的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新项目里边的作法是，建立一个用以变换和储存base64的部件，把slot里边的照片所有变换成base64，并且为img标识建立name特性并且做好为sessionStorage的key；创下建一个部件做为显示信息部件（只包括一个img标识），设定其name特性和其相匹配的照片的一样，做为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/work_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，大伙儿能够安心应用。

之上便是文中的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多的适用诺心互联网。