Git Product home page Git Product logo

localresizeimg's Introduction

LocalResizeIMG

前端HTML5本地压缩图片,兼容移动设备IOS,android。

概述

  • 通常压缩图片需要上传到后端,由后端处理。
  • 但是如果要上传的图片很大,特别是手机当场拍摄下来的照片(约2M+),那样效率会很低,用户也不会愿意等待。
  • 现在能够由前端本地压缩的话,效率将会极大的提升。

BUG修复 1.0

  • 修复android下压缩无效果的问题
  • 修复IOS压缩图片扭曲的问题。
  • 微信的话... 经过测试,目前新版本都支持触发上传了,大赞!XD

BUG修复 1.1

  • 修复某些网友反映IOS图片方向不对的问题。(说出原因估计会被打死.. 因为我写错参数了..)
  • 增加 angularJs 支持,双向绑定方式。

关于IOS下图片方向依旧不对的问题

FAQ Q. Photos from iPhone is rotated and not in correct orientation. A. Orientation of jpeg file is recorded in EXIF format. This library won't detect exif information automatically. To detect the information in JavaScript, use exif.js (https://github.com/jseidelin/exif-js).

以上是采用的修复IOS Bug的插件中的说明,大意的解决办法是使用 exif.js 目前木有精力去修复,愿意帮忙的朋友可以 PR 本库。

图1

使用方法-jquery

	$('input:file').localResizeIMG({
	     width: 100,
	     quality: 0.1,
	     // before: function () {},
	     success: function (result) {
	     var img = new Image();
	     img.src = result.base64;

	     $('body').append(img);
	     console.log(result);
	     }
	 });

使用方法-angularjs

  1. 引入 patch/angular-localResizeIMG.js
  2. 直接看代码吧。
	# js(coffeescript版)
	app = angular.module 'app', ['localResizeIMG']

	# html (任何元素都能够响应上传,无关view,意味着你可以用任何姿势调用)
	<button local-resize-img l-width="300" l-quality="0.7" ng-model="pic">上传</button>
	<img ng-src="pic.base64" />

demo

具体详情请查看 源代码,或者 demo

PS

这是8个月前的测试文章的延伸,点我去看看

技术: jquery
时间: 2014年5月
博客: think2011

localresizeimg's People

Contributors

think2011 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.