LocalResizeIMG-前端HTML5本地压缩图片

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

概述

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

BUG修复 1.0

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

BUG修复 1.1

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

图1

使用方法-jquery

1
2
3
4
5
6
7
8
9
10
11
12
	$('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. 直接看代码吧。
    1
    2
    3
    4
    5
    6
    
    	# 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月
源码: Guthub

directive中的transclude里的scope BUG

概述

恩,这个标题起的很有逻辑的样子 :D
直接来看一小段代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// html
<body ng-controller="appCtrl">
 <blue-label>
   我是在 transclude 里的 a: 
   <br />
   <input type="text" ng-model="a">
  </blue-label>
  
  我是在 外面 里的 a: 
</body>

// javascript
var appModule = angular.module('app', []);

appModule.directive('blueLabel', function() {
    return {
        restrict: 'E',
        template: '<div style="background:skyblue;"><span ng-transclude></span></div>',
        transclude: true
    };
});

appModule.controller('appCtrl',function($scope) {
    $scope.a = '初始化内容';
});

可能你会认为 scope.a 要么就是在directive里,要么就是在controller里,可事实有点诡异。

  • controller把 scope.a 初始化了。
  • scope.a 却在directive里(不确定),未与controller同步。

阅读全文

javascript设计模式笔记-13 享元模式

简述

  • 公司里的打印机就是一个很好的享元模式的例子。
  • 如果不使用享元模式,就意味着每个员工都一台打印机,现实中很浪费是不是。
  • 享元模式的做法就是仅需一台或几台打印机,每个人都可以去用,这样就节省了很多开支。
  • 享元模式的主要功能是优化内存占用。
  • 调试、维护会相应变得复杂。

阅读全文