本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、毕业设计辅导
 当前位置:文章中心 >> web前端技术
立即购买视频教程 APP中图片的压缩与上传
夜鹰教程网 来源:www.yyjcw.com 日期:2017/6/30 10:57:16
分享到:
图片的压缩与上传,是APP里一个很常用的功能。我们来年看 ChiTuStore 是怎样做的

这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

一、简介

图片的压缩与上传,是APP里一个很常用的功能。我们来年看 ChiTuStore 是怎样做的。相关文件 App/Module/User/UserInfo.html,App/Module/User/UserInfo.ts


二、HTML布局

HTML 文件中,有如下二句,第一句就是上图所看到的图片,其中的 class 表示该图片以圆形来显示,并且靠右。第二句是一个 Input 控件,其类型为 file ,是用来上传文件的。值得注意的是 style,这的作用是让该控件与图片重叠,并且透明(opacity:0),accept="image/*" 的作用是只上传图片。


 <img data-bind="attr:{src:userInfo.HeadImageUrl}" class="img-circle pull-right" style="width:70px;height:70px;">

 <input type="file" style="position:absolute;top:0px;left:0px;opacity:0;width:100%;height:90px;" accept="image/*">

 

三、图片的压缩

传统 WEB 的做法,都是把图片直接上传到服务端,然后在服务端进行压缩。但现在,在H5 中,是可以对图片进行压缩再上传的。我们来看一下 JS 代码,其中的 ImageFileResize 就是用来处理图片的压缩的。


复制代码

    page.viewChanged.add(() => {

        var e = page.nodes().content.querySelector('[type="file"]');

        var imageFileResize = new ImageFileResize(<HTMLInputElement>e, { maxWidth: 100, maxHeight: 100 });

        imageFileResize.imageResized = (urls: string[], thumbs1: string[], thumbs2: string[]) => {

            model.userInfo.HeadImageUrl(thumbs1[0]);

            member.setUserInfo(mapping.toJS(model.userInfo));

        }

        ko.applyBindings(model, page.node());

    })

复制代码

我们现在来看一下 ImageFileResize 中的关键代码,这段代码的作用是用来把 <input type="file"/> 选取的文件,进行压缩的。其中有几个关键的对象、函数,是 H5 中的 API,FileReader,createObjectURL,Image。


这几个对象、函数的具体用法,在这里就不展开说了,网上搜一下就可以找到答案了。


复制代码

 var reader = new FileReader();

 reader.readAsArrayBuffer(file);

 reader.onload = (ev: Event) => {

      var blob = new Blob([event.target['result']]);

      window['URL'] = window['URL'] || window['webkitURL'];

      var blobURL = window['URL'].createObjectURL(blob); // and get it's URL

      var image = new Image();

      image.src = blobURL;

      image.onload = () => {

           var url = this.resizeMe(image, max_width, max_height);

           var thumb = this.resizeMe(image, this.thumb2.maxWidth, this.thumb2.maxHeight);

           result.resolve({ index: index, url: url, data: url, thumb: thumb });

      }

 }

复制代码

下面我们再来看一下 resizeMe 函数,这个函数的把的图片(HTMLImageElement),转换为了 base64 的字符串,其中一个重要的对象就是 canvas,它也是 H5 中的对象。通过它可以把图片转换为 base64 字符串。


复制代码

 private resizeMe(img: HTMLImageElement, max_width: number, max_height: number) {


        var canvas = document.createElement('canvas');


        var width: number = img.width;

        var height: number = img.height;


        // calculate the width and height, constraining the proportions

        if (width > height) {

            if (width > max_width) {

                height = Math.round(height *= max_width / width);

                width = max_width;

            }

        } else {

            if (height > max_height) {

                width = Math.round(width *= max_height / height);

                height = max_height;

            }

        }


        canvas.width = width;

        canvas.height = height;

        var ctx = canvas.getContext("2d");

        ctx.drawImage(img, 0, 0, width, height);


        return canvas.toDataURL("image/jpeg", 0.7);


    }

复制代码

 

四、服务端的保存

服务的保存有两种方法


1、把 base64 字符串转换为二进制流,然后再保存为图片文件。


2、直接把 base64 保存数据库。在这个项目,是把它保存到 MongoDB 数据库。


 

五、浏览器的坑

即然是通过浏览器进行压缩上传,那么就无法避免会有坑。


1、在 QQ 浏览器中,不起作用。据说是不支持 canvas 。


2、在 APP 的混合开发中,在锤子 T2 的手机也不起作用。


 

六、小结

尽管在本地压缩、预览图片有着很好的用户体验,但是兼容性差,如果是 APP 的开发,还是调用原生的接口吧。如果浏览器的 WEB APP 项目,还是得考虑兼容性。不支持 canvas 的浏览器,使用传统的方法来上传图片。


 


代码已经开源在 github,感兴趣的朋友可以自行下载。https://github.com/ansiboy/ChiTuStore


复制链接 网友评论 收藏本文 关闭此页
上一条: 在项目中使用 IScroll问题总结  下一条: git常用命令汇总
购买夜鹰教程网视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  购买教程
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
移动端视口的相关概念及其适配方案…
上传图片立即预览
web worker 实现js多线程
文件断点续传的实现
在项目中使用 IScroll问题总结
APP中图片的压缩与上传
git常用命令汇总
Git 常用命令介绍
Grunt.js学习教程
webpack学习指南
Webpack教程01
微信小程序第一批吃螃蟹的人
前端面试题-事件监听、继承、闭包…
HTML5 Canvas学习笔记-处理鼠标事…
canvas学习笔记
  工具下载  需要远程协助? 购买教程

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
vs2012 vs2008 vs2010 sql2008 sql2005
Asp.Net  

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

关于我们 | 广告投放 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接 | 购买教程

Nighthawk Tutorials Network 快捷购买教程

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3

 

出售asp.net系列视频教程 高清原创版 每天晚上20:30--23:00在线 按照编号从简单到高级 http://www.yyjcw.com/list.html