LocalResizeIMG.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /**
  2. * 获得base64
  3. * @param {Object} obj
  4. * @param {Number} [obj.width] 图片需要压缩的宽度,高度会跟随调整
  5. * @param {Number} [obj.quality=0.8] 压缩质量,不压缩为1
  6. * @param {Function} [obj.before(this, blob, file)] 处理前函数,this指向的是input:file
  7. * @param {Function} obj.success(obj) 处理后函数
  8. * @example
  9. *
  10. */
  11. $.fn.localResizeIMG = function(obj) {
  12. this.on('change', function() {
  13. var file = this.files[0];
  14. var URL = window.URL || window.webkitURL;
  15. var blob = URL.createObjectURL(file);
  16. // 执行前函数
  17. if ($.isFunction(obj.before)) {
  18. obj.before(this, blob, file)
  19. };
  20. _create(blob, file);
  21. this.value = ''; // 清空临时数据
  22. });
  23. /**
  24. * 生成base64
  25. * @param blob 通过file获得的二进制
  26. */
  27. function _create(blob) {
  28. var img = new Image();
  29. img.src = blob;
  30. img.onload = function() {
  31. var that = this;
  32. //生成比例
  33. var w = that.width,
  34. h = that.height,
  35. scale = w / h;
  36. w = obj.width || w;
  37. h = w / scale;
  38. //生成canvas
  39. var canvas = document.createElement('canvas');
  40. var ctx = canvas.getContext('2d');
  41. $(canvas).attr({
  42. width: w,
  43. height: h
  44. });
  45. ctx.drawImage(that, 0, 0, w, h);
  46. /**
  47. * 生成base64
  48. * 兼容修复移动设备需要引入mobileBUGFix.js
  49. */
  50. var base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
  51. // 修复IOS
  52. if (navigator.userAgent.match(/iphone/i)) {
  53. var mpImg = new MegaPixImage(img);
  54. mpImg.render(canvas, {
  55. maxWidth: w,
  56. maxHeight: h,
  57. quality: obj.quality || 0.8
  58. });
  59. base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
  60. }
  61. // 修复android
  62. if (navigator.userAgent.match(/Android/i)) {
  63. var encoder = new JPEGEncoder();
  64. base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80);
  65. }
  66. // 生成结果
  67. var result = {
  68. base64: base64,
  69. clearBase64: base64.substr(base64.indexOf(',') + 1)
  70. };
  71. // 执行后函数
  72. obj.success(result);
  73. };
  74. }
  75. };
  76. // 例子
  77. /*
  78. $('input:file').localResizeIMG({
  79. width: 100,
  80. quality: 0.1,
  81. //before: function (that, blob) {},
  82. success: function (result) {
  83. var img = new Image();
  84. img.src = result.base64;
  85. $('body').append(img);
  86. console.log(result);
  87. }
  88. });
  89. */