因为企业业务流程必须，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，大伙儿能够安心应用。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。