淘宝主图制作_图片怎么加水印_免费logo图片生成器_在线长图生成器_图怪兽在线制图
当前位置:建站首页 > 新闻资讯 > 公司新闻 >

探讨手机端网页页面照片预载入计划方案

发表日期:2021-04-05 02:05文章编辑:jianzhan浏览次数: 标签:    

因为企业业务流程必须,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,大伙儿能够安心应用。

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

返回列表
相关新闻

港信通手机上商城系统——商城系统企业网站建

频道: 商城系统网站 時间: 2013/11/29 15:03:26 来源于: 92互联网企业 关注度: 网址:p> 连云港...

日期:2021-03-28 浏览次数:138

重庆网站商城建设-时下火爆的h5手机游戏营销推

微信营销的受欢迎在全部营销推广圈子都深受大伙儿的关心,其独有的交互性是公司亲睐的缘...

日期:2021-03-28 浏览次数:84

化妆品商家开发小程序-情结×h5手机游戏制作,营

如今许多公司都会卖情结,例如近期朋友圈疯传的贴心视频“啥是佩奇”,实际上啊,在微信...

日期:2021-03-28 浏览次数:107

前后左右端分离出来,在 angular 8 中运用 JWT 开展

JWT 是啥,为什么要应用 JWT?JWT 是 JSON Web Tokens 的通称,针对这一难题最精减的回应是,JWT 具...

日期:2021-03-27 浏览次数:175

刷手机上seo排:诊疗制造行业seo的一些对策

随着着seo的加速发展趋势发展趋势,诊疗制造行业里的seo的销售市场市场竞争也越来越越猛烈...

日期:2021-03-24 浏览次数:137

app手机软件开发设计订制业务外包服务

app手机软件开发设计订制业务外包服务-「你所不知道道的沟通交流」admin APP开发设计 0 编号...

日期:2021-03-24 浏览次数:186