html5 | 易学教程

FileReader实现上传图片前本地预览

阅读更多关于 FileReader实现上传图片前本地预览

　　平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到URL再渲染到页面上。或者使用前端插件。这篇博客使用的是HTML5的新特性——FileReader。由于兼容性，这种方法不适合pc端...FileReader具体的兼容性点这里： FileReader兼容性。　　自从有了HTML5的FileReader对象以后，预览图片变得简单多了，不再需要后台的配合，并且JS操作本地文件已经成为了可能。这种方法的思路是：通过readAsDataURL(file)方法把图片文件转成base64编码，然后把base64编码替换到预览图片的src属性即可。这篇博文主要讲解使用方法，如果想要了解更多关于FileReader对象的，可以看一下这里： FileReader详解。下面分别讲解上传单张和多张的案例： 1 、单张上传 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>上传单张预览</title> </head> <body> <div id="wrapper"> <input id="fileUpload" type="file" /> <div id="image-holder"> <

使用readAsDataURL方法预览图片

阅读更多关于使用readAsDataURL方法预览图片

使用FileReader接口的readAsDataURL方法实现图片的预览。　在FileReader出现之前，前端的图片预览是这样实现的：把本地图片上传到服务器，服务器把图片地址返回，并把它替换到图片元素的src属性。这种方法的缺点是：必须要先把图片上传到服务器。那么问题来了，如果上传的图片很大，而网速又很慢，这就需要等待很久预览图片才会显示出来了，而且，如果用户预览图片后发现不太满意，想重新选择一张图片，这时候还要把已经上传到服务器上的图片给删除掉。自从有了HTML5的FileReader对象以后，预览图片变得简单多了，不再需要后台的配合，并且JS操作本地文件已经成为了可能。这种方法的思路是：通过FileReader.prototype.readAsDataURL()方法把图片文件转成base64编码，然后把base64编码替换到预览图片的src属性即可。如果想要了解更多关于FileReader对象的，可以看一下这里： FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 下面是使用FileReader进行图片预览的简单demo： <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1

解决ios下拍照自动旋转问题

阅读更多关于解决ios下拍照自动旋转问题

<input class="sr-only" id="inputImage" name="file" type="file" accept="image/*" onchange="getFile()"> 上传照片 <canvas id="canvas" style="height: 0px"></canvas> 需要引入EXIF.js function getFile() { // alert(1111); let _this = this let img = document.getElementById('image') let file = document.getElementById('inputImage').files[0] let reader = new FileReader() _this.finish = 1 EXIF.getData(file, function () { console.log(1111); let orientation = EXIF.getTag(this, 'Orientation') console.log(orientation); reader.addEventListener('load', function () { console.log(1111); let image = new Image() image.src =

基于 HTML5 + WebGL 的 3D 风力发电场

阅读更多关于基于 HTML5 + WebGL 的 3D 风力发电场

前言风能是一种开发中的洁净能源，它取之不尽、用之不竭。当然，建风力发电场首先应考虑气象条件和社会自然条件。近年来，我国海上和陆上风电发展迅猛。海水、陆地为我们的风力发电提供了很好地质保障。正是这些场地为我们的风力提供了用之不竭的能源。现在我们正在努力探索这些领域。本文章实现了风力发电场的整体流程。能让大家能够看到一套完整风力发电预览体系。需要注意的是，本次项目是使用 Hightopo 的 HT for Web 产品来搭建的。预览地址： https://hightopo.com/demo/wind-power-station/ 大致流程下面是整个项目的流程图。我们从首页可以进入到场区分布页面和集控页面。场区分布页面又包括两个不同的 3D 场景，分别是陆地风机场和海上风机场。点击两个 3D 风机场最终都会进入到 3D 风机场景。预览效果首页: 1. 世界地图效果 2. 中国地图效果 2. 城市地图效果集控中心页面（没有动画效果）：场区分布页面（没有动画效果）：陆地风机场：海上风机场：代码实现我们可以看到，首页的地球有三种视角状态，世界地图、中国地图、城市地图。点击每个状态相机就会转到对应的位置。在这之前我们要先预先存一下对应的 center 和 eye 。我们最好新建一个 data.js 文件，专门用来提供数据。相关伪代码如下： // 记录位置

这一次，彻底弄懂 JavaScript 执行机制

阅读更多关于这一次，彻底弄懂 JavaScript 执行机制

不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论： javascript是按照语句出现的顺序执行的看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的，所以我们以为js都是这样的： let a = '1' ; console .log(a); let b = '2' ; console .log(b); 然而实际上js是这样的： setTimeout( function ( ) { console .log( '定时器开始啦' ) }); new Promise ( function ( resolve ) { console .log( '马上执行for循环啦' ); for ( var i = 0 ; i < 10000 ; i++){ i == 99 && resolve(); } }).then( function ( ) { console .log( '执行then函数啦' ) }); console .log( '代码执行结束' ); 依照js是按照语句出现的顺序执行这个理念，我自信的写下输出结果： //"定时器开始啦" //"马上执行for循环啦" //

这一次，彻底弄懂 JavaScript 执行机制

阅读更多关于这一次，彻底弄懂 JavaScript 执行机制

△ 是新朋友吗？记得先点 web前端学习圈关注我哦～本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论： javascript是按照语句出现的顺序执行的看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的，所以我们以为js都是这样的： let a = '1'; console.log(a); let b = '2'; console.log(b); 然而实际上js是这样的： setTimeout(function(){ console.log('定时器开始啦') }); new Promise(function(resolve){ console.log('马上执行for循环啦'); for(var i = 0; i < 10000; i++){ i == 99 && resolve(); } }).then(function(){ console.log('执行then函数啦') }); console.log('代码执行结束'); 依照 js是按照语句出现的顺序执行

微信小程序数据缓存

阅读更多关于微信小程序数据缓存

　　微信小程序的本地缓存：wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）。通过以上方法可以对本地数据进行设置、获取和清理。本地缓存最大为10MB。在用户更换设备时，用户的localStorage信息将会丢失，因此不建议将关键信息全部存在localStorage。　　本地缓存分为同步存储和异步存储，同步方法和异步方法的区别是：同步方法会堵塞当前任务，直到同步方法处理返回。异步方法不会塞当前任务。　　同步优点：方便调试，程序的执行顺序很清晰。　　同步缺点：同步必须方法执行完之后再进一步执行后面的代码，同步方法执行很慢的时候整个UI会卡住。同步的方法运行不过去，后面的方法就走不了，所以代码的耗时就会非常长。　　异步优点：不会卡主UI，代码会立刻走完，执行后面的程序。　　异步缺点：不知道何时执行数据缓存，调试不便。　　一般在微信小程序中，一般多用同步缓存来存储数据，在某些特定情况下才需要使用异步存储的方式。操作异步方法同步方法插入 wx.setStorage wx.setStorageSync 读取 wx.getStorage wx.getStorageSync 删除 wx.removeStorage wx

管理系统开发中系统主题颜色开发详解

阅读更多关于管理系统开发中系统主题颜色开发详解

最近开发一个项目中遇到一个切换主题皮肤的需求，特地将开发流程整理出来供大家一起探讨学习。首先我们要先现在src文件下的style里编写项目需求的scss文件，这个过程相当恶心，而且项目经理给了几套颜色就得写几套，个人建议纸style里面建一个新的文件夹存放你写的样式。值得注意的是编写scss文件的时候我们得在所以的css样式外层写一个class选择器将所有的样式包裹其中。如图所示， .theme-bule { } .theme-bule{}将所有的样式都包裹其中的，这一步很重要，这个名字也不要乱取，要做到见名知其意，然后项目需要的其他主题颜色也用相同的方式写好，接着在这个样式文件夹里建一个（index.scss）文件将所以样式引出，接着在style文件夹下找到一个一个（index.scss）的文件[ps：这里的index.scss文件和你建的那个主题颜色文件夹下的index.scss文件是不一样的哈]，这个index.scss文件是element-admin框架自带的，目的是将所有样式引入到（main.js）文件里面全局生效的，接下来我们需要在utils文件里面封装一个设置主题的方法，很简单，就说给页面body起动态class名字的，刚刚我在主题颜色css样式最外面包裹的那个class就会动态替换以达到换皮肤的效果。有了这一步完全还是不够的，为了让主题颜色能够保存不变

HTML5游戏开发进阶指南中文pdf扫描版

阅读更多关于 HTML5游戏开发进阶指南中文pdf扫描版

HTML5游戏开发进阶指南介绍了HTML5游戏开发的一般过程和技巧。全书共分12章，第1章介绍了本书相关的HTML5的诸多新特性，包括在canvas上绘图、播放声音等，另外还引入了子画面页的概念；第2～4章利用Box2D物理引擎开发了一款非常类似于《愤怒的小鸟》的游戏，全面介绍了物理引擎的概念，以及在游戏中使用物理引擎的方法，这一部分还引入了视差滚动技巧，以实现某种伪3D效果；第5～10章开发了一款简化版的《红色警戒》游戏，这一部分涉及了相当多的内容，包括地图的制作，建筑与单位的设定、绘制，玩家与单位的互动，触发器与剧情的编写，路径规划算法等；第11、12章利用Node.js和WebSocket开发了《红色警戒》游戏的多人对战模式，这一部分的主要问题是保持游戏在多个玩家的浏览器中的状态一致。 HTML5游戏开发进阶指南目录第1章HTML5与JavaScript概要第2章创建基本的游戏世界第3章物理引擎基础第4章物理引擎集成第5章创建即时战略游戏世界第6章加入单位第7章单位智能移动第8章添加更多的游戏元素第9章添加武器和战斗第10章完成单人战役第11章 WebSocket与多人对战模式第12章多人对战游戏操作教程地址： HTML5游戏开发进阶指南中文pdf扫描版来源： oschina 链接： https://my.oschina

websocket 断线重连

阅读更多关于 websocket 断线重连

服务端为swoole 的websocket 客户端js代码： // 1.创建websocket客户端 var wsServer = 'ws://ip/' ; var limitConnect = 3; // 断线重连次数 var timeConnect =0 ; webSocketInit(wsServer); // socket初始化 function webSocketInit(service){ var ws = new WebSocket(service); ws .onopen = function () { console . log ("已连接TCP服务器" ); }; ws .onmessage = function (msg) { console . log (msg); }; ws .onclose = function () { console . log ('服务器已经断开' ); reconnect(service); }; ws .onerror = function (err) { // console.log("服务器报错："); reconnect(service); }; // 重连 function reconnect(service) { // lockReconnect加锁，防止onclose、onerror两次重连 if

订阅 html5