前言 最近在用webpack打包react代码的时候发现一个问题，做一个处理总结分享出来给大家，下面来一起看看详细的介绍： 我的webpack配置： var webpack = require(webpack); //打包less插件 var ExtractTextPlugin = require(extract-text-webpack-plugin); //这里的./css/bundle.css设置打包地址 var ExtractLess = new ExtractTextPlugin(./css/bundle.css); //打包多个文件插件 //var commonsPlugin = new webpack.optimize.Commo...
最近在做一个H5的项目，里边涉及到拍照上传图片的功能以及识别图片的功能，这里对识别图片的功能不做赘述，不属本文范畴。我在做完并上线项目后，同事跟我提了一个要求是可不可以同时选择多张图片上传，我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了，如果不加，就无法同时选择多张图片，于是我就照实跟同事说了这个情况。但回头一想，单张图片可以上传，那多张图片呢？于是就有了本文的内...
废话不多说了，直接给大家贴代码了，具体代码如下所示： // 上传目标触发点 <input type="file" class="upvideo" name="upvideo" id="fileupload1" /> // 引入插件 <script type="text/javascript" src="{$IMG}/bstage/js/jquery.form.js" language="javascript"></script> /**方法调用**/ setFileUpload({ name: fileupload1, backfun: upback1, beforefun: checkUp1, loadfun:loadup, phpUrl: /ossphp/php/get.php?ft=vid...
本文实例讲述了基于pako.js实现gzip的压缩和解压功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>pako.js实现gzip的压缩和解压</title> </head> <body> <script type="text/javascript" src="pako.js"></script> <script > var b64Data = H4sIAAAAAAAAAJ3UMQ7CMAwF0KugP2ewEzdpcxXUAbWAOiHUMqCqdyeVQAobfGXIYL8hP5ZXnEdkeNEk6vUgXTbLonC4zMjHFY/5Wm511ekdTsOCLKVp...
在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用，但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题，所以最后拍照上传功能还是使用input file方式里解决的。但是内心还是不甘心的，由于项目进度推进，迭代版本，所以不得不放弃，后续可能我将此功能使用调用H5+接口实现。 首先我来讲我实现这个拍照预览压缩上传的思路，准确...
接到需求，问前端是否可以压缩图片？因为有的图片太大，传到服务器上再压缩太慢了。意识里没有这么玩过，早上老大丢来一个知乎链接，一看，原来前辈们已经用canvas实现了(为自己的见识羞愧3秒钟，再马上开干)！。 canvas压缩 使用了github上的一个现成库：https://github.com/stomita/ios-imagefile-megapixel，不得不膜拜下stomita这位大神。大体的思路是将图片抽样显示在canvas上，然后用通过canvas.toDataURL方法得到base64字符...
涉及到网页图片的交互，少不了图片的压缩上传，相关的插件有很多，相信大家都有用过，这里我就推荐三款，至于好处就仁者见仁喽： 1.名气最高的WebUploader，由Baidu FEX 团队开发，以H5为主，FLASH为辅，兼容 IE6+，iOS 6+, android 4+，采用大文件分片并发上传，极大的提高了文件上传效率，看了官方文档就知道，能满足你所需要的所有功能，一言以蔽之，大而全；至于缺点，大概就是插件体积太大了，自带样式文件，而且还要依赖jque...
摘要: 使用iframe来处理异步上传图片，在现在这个时代来说，多多少少都有点落后了！单单就凭AJAX和JS就不能做到异步上传图片了吗？感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG 先看调用页面：<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"><script type="text/javascript" src="./js/lrz.mobil...
移动h5开发避免不了上传图片，一般我们使用html自带的控件input或者使用微信上传API。但微信上传API不是任何地方都可以使用的，使用html自带的控件input上传又免不了图片体积太大，上传不稳定。localResizeIMG4就是为此而生的。 本文演示版本localResizeIMG 4.9.35。 特点 兼容IOS，Android，PC、自动按需加载文件 支持压缩比例 支持原生JS、jQuery/Zepto 支持Promise特性 使用Base64 下载地址 localResizeIMG共有4个历史版本，每个...
因为最近遇到个移动端上传头像的需求，上传到后台的数据是base64位，其中为了提高用户体验，把比较大的图片用canvas进行压缩之后再进行上传。在移动端调用拍照功能时，会发生图片旋转，为了解决这个问题引入了exif去判断拍照时的信息再去处理图片，这是个很好的插件。关于exif.js可以去他的GitHub上了解，这边直接 npm install exif-js --save 安装，然后import一下就可以使用了。以下就是源码，可以直接使用。 <template> <div>...
此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果链接在文章底部贴出。 在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，拿iphone6来说，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了，如果用户用的是移动流量，完全把图片上传显然不是一个好办法。 目前来说，HTML5的各种新API都在移动端的webkit上得到了较好的...
在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用，但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题，所以最后拍照上传功能还是使用input file方式里解决的。但是内心还是不甘心的，由于项目进度推进，迭代版本，所以不得不放弃，后续可能我将此功能使用调用H5+接口实现。 首先我来讲我实现这个拍照预览压缩上传的思路，准...
一、前言三年.net开发转前端已经四个月了，前端主要用webpack+vue，由于后端转过来的，前端不够系统，希望分享下开发心得与园友一起学习。图片的上传之前都是用的插件(ajaxupload)，或者传统上传图片的方式,各有利弊：插件的问题是依赖jq并且会使系统比较臃肿，还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低，现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离，遵从高内聚，低偶尔的原则，开发人员各司其...
需要了解的知识： 1、nodejs的安装与命令行使用 2、nodejs安装应用 3、grunt的初步了解 本文已假定读者已经熟悉以上知识。 好，我们继续： 任务1：将src目录下的所有zepto及插件合并，并压缩。 --src/ajax.jsassets.jscallbacks.jsdata.jsdeferred.jsdetect.jsevent.jsform.jsfx.jsfx_methods.jsgesture.jsie.jsios3.jsselector.jsstack.jstouch.jszepto.js目录结构： dist/ node_modules/ src/ Gruntfile.js package.json package...
最近有一个项目使用了 requirejs 来解决前端的模块化，但是随着页面和模块的越来越多，我发现我快要hold不住这些可爱的js文件了，具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl ， paths 之类的)。 不知谁说过，一些事重复做了三次，就该考虑一下自动化了，于是我小心翼翼的掏出了我的 grunt 。 我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能，这个就是根据 r.js 封装的 grunt 插件。 安装...