前言: 我们在进行移动设备开发的时候,我们常常会准备不同大小的图片资源以适应不同大小的设备,下面我称普清图片资源和高清图片资源.那么如何做到图片资源的自适应呢?下面我来用一个demo展示一下这个效果的实现. 工具介绍: IOS开发有一个非常好用的图片合成工具,能够让多个png图片合成一个大的资源图片,也可以生成普清和高清的两种资源图片,这个工具就是TextureParker. 如何用TextureParker生成资源图片 打开TP工具,然后Add Sprites,添加上你想要添加的图片资源(最好

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM

前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款HTML5图片切换动画的两侧有淡化处理,因此更显立体效果. 找html5教程开发,canvas开发,jquary特效的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的,请联系涂志海,再解决,嘿嘿)同样的,这里静态图片完全体现不出来这个插件的效果,大家可以点击演示地址看看. 下 载 演

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > .katex-html { display: block; } .katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; } .katex { font-style: normal; font

swipe是一个轻量级的移动滑动组件,它可以支持精确的触滑移动操作,能解决移动端对滑动的需求. swipe插件的使用主要有四大块: 一.html <div id='slider' class='swipe'> <div class='swipe-wrap'> <div>1</div> <div>2</div> <div>3</div> </div> </div> 1.最外层的div的id

CKEditor 富文本编辑器很好用,功能很强大,在加上支持服务端图片上传的CKFinder更是方便, 最近在使用CKFinder的时候发现存在很多问题,比如上传图片的时候,图片不能按时间降序排列,另外CKFinder是也是收费的,所以自己想实现一个简单的类似CKFinder的功能, 本节只讲在CKEditor实现服务器图片的插入插件实现方法. CKEditor版本是 ## CKEditor 4.4.4 第一.定义插件 1.在ckeditor\plugins文件夹下,新建serverimg文件夹

在移动端开发的过程中,或许会遇到对图片裁剪的问题.当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉. 图片裁剪的jquery插件有很多,我也测试过很多,不过大多数都是支持pc端的图片裁剪,而支持移动端图片裁剪的少,很流畅的可能就会更少了. 作为一个新手,我尝试了很多种解决方法,在初始的时候尝试自己写一个jquery插件支持触屏事件等,写出来了,但是觉得都不好意思拿出手,更别说拿出来商用了. 又尝试找了一些插件,一个个试.最后综合评价,感觉还不错的jquery插

图片通常是移动端网页中最占流量的资源.在很多类型的网站中(比如电商.社区),图片占据了网页的大部分空间.优化图片的质量和加载速度成为提高用户体验的重要途径. 传统方案的弊端 目前有一些被广泛应用的方案,例如选择压缩比更高的图片格式.使用雪碧图.HTTP2.CDN等.5年前的一条知乎回答前端开发中,对图片的优化技巧有哪些? - 贺师俊的回答 - 知乎现在依然有效,这些方案在各大网站中仍然发挥着重要的作用. 随着移动端兴起,各种移动设备带来了丰富的机型尺寸和像素密度,逐渐暴露出以上方案共同的问题,即

这个效果是公司产品中一个用到的效果,用于展示项目的信息,废话少说,先上效果图,代码在最后:),这个组件是在上篇博客中用webpack搭建的环境中完成的http://www.cnblogs.com/wunan/p/5776117.html#3490750 (完全暴露了自己的喜好--) 组件中其实最重要的就是手势的几个事件的用法,在react中手势的事件被应用为onTouchStart,onTouchMove,onTouchEnd,通过对这几个事件的监听,完成图片随手势的移动. 先看一下dom结构

上传图片的功能是极为常用的,之前做过一个移动端上传文件的功能(基于jquery的),总结梳理一下. html <div class="uploadPic clearBox"> <ul> <li> <a href="javascript:void(0)" class="add001"><i class="iconfont"></i></a> &

最近在做移动端的营销页面时,遇到了页面有大量图片的情况,于是很自然的想到了要使用图片lazyload,PC端用着jQuery,也有现成的插件.但是在移动端,基本不用jQuery,于是就试着自己去造一下轮子.实现lazyload并不难,我很快就想到以下几个步骤: 首先HTML中不直接写图片真实URL,而是用一个空图代替,如<img class="lazy" src="images/nopic.png" data-original="images/tes

图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然无法按照高度来计算是否在可视区内加载.那我就按照个数加载,每次加载X张图片,滚动到底部的时候再加载X张.如果图片高度比较小,X张加载后图片没有满屏,那么就再执行一次加载. Example:http://www.yc.cn/app/commonweal/ 使用方法 原生JS: var lazyPhot

第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上传的情况下,为了上传图片而去使用form表单感觉很蠢.然后那时候也没有想到用jquery form插件. 后台的同事给的方案是用iframe里写一个form表单,然后上传图片之后自动提交表单,他将图片在服务器上的地址以跳转页url的一部分,我再来截取的方式. 方案一:iframe+form表单 <f

首先要下载Base64.java文件http://iharder.sourceforge.net/current/java/base64/ 将代码复制到project中. 然后上代码: android端代码: private void setPicToView(Intent picdata) {             Bundle extras = picdata.getExtras();             if (extras != null) {                  m

最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑动切换图片以及上下滑动关闭大图.现在简单分享一下. 一.需要引入的css和js文件. 页面中需要引入如下文件:photoswipe.css,default-skin.css,photoswipe.js,photoswipe-ui-default.min.js 首先可以到它的官网或者github网站上

本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或Blob对象异步读取存储在用户计算机上的文件(或数据缓冲区)的内容. 有了FileReader就不需要先把文件发送到服务器端,然后再返回到浏览器端显示这种模式了,可以直接在浏览器端读取文件并显示. DND获取文件 通过对DragAndDrop事件的监听获取文件. z.event.on(listDiv

pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行了,当我遇到finger.js后,就直接抛弃自己写的那个库了. 扯了那么多,是时候进入正题,这里用touch插件来写一个轮播组件的封装. 使用姿势如下: var banner = new Banner({ images: ['ci5.jpg', 'ci6.jpg', 'ci7.jpg', 'ci8.

在利用vue做一些H5页面时,或多或少会遇到有图片上传的操作,主要是运用html5里面的input[type=file]来实现,传递到后端的数据是以二进制的格式传递,所以上传图片的请求与普通的请求稍微有点差异,具体体现在传递数据的格式是FormData,FormData是一个构造函数,具体用法链接如下: MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData 其次,需要修改下请求头的Content-Type类型 在具体有以下几部

备注下, [自己无意中用的方法]接收时,设置两个参数,一个是图片名称,另一个是实际文件.然后用$_FILES处理就可以了. 如: $icon = $_POST['icon'];//这个是图片的名称,用于$_FILES数组的处理 $iconfile = $_POST['iconfile'];//用于实际接收图片文件,只要接受过来就可以,这个变量$iconfile之后并没有用处,用$icon处理就可以了 ================================================