手工上传,下载(Blob,base64)

原创 2016年08月29日 20:53:35

一个插件

/**
 * ^.^
 */
;(function() {
function fun($) {
$.Image2Blob = function() {
   this.setId = _setId;
   this.setEvent = _setEvent;
   this.setCallBack = _setCallBack;
   this.fire = _fire;
   this.blob = _blob;
   this.base64 = _base64;
   this.fileName = _fileName;

   function _setId(id) {
      _id = id;
   }

   function _setEvent(event) {
      _event = event
   }

   function _setCallBack(handle) {
      _handle = handle
   }

   function _img2Base64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS');
      var ctx = canvas.getContext('2d'); 
      var img = new Image; 
      img.crossOrigin = 'Anonymous';

      img.onload = function(){
        var width = img.width;
        var height = img.height;
        canvas.width = width; 
        canvas.height = height; 
        ctx.drawImage(img, 0, 0, width,height , 0, 0, width, height); 
        var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
        callback.call(this, dataURL); 
        canvas = null; 
      };

      img.src = url; 
    }

   function _getURL(file) {
      var url = null ; 
      if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
      }
      else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
      }
      else if (window.webkitURL!=undefined) { // web_kit or chrome
        url = window.webkitURL.createObjectURL(file) ;
      }

      return url ;
   }

   function _base64toBlob(dataurl) {
     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

      while(n--){
         u8arr[n] = bstr.charCodeAt(n);
      }

      return new Blob([u8arr], {type:mime});
   }

   function _callBack(value) {
      _base64Str = value;
      _blob = _base64toBlob(value);

      if(_handle != null) {
         _handle(_base64Str);
      }
   }

   function _blob() {
      return _blob;
   }

   function _base64() {
      return _base64Str;
   }

   function _fileName() {
      return _fileName;
   }

   function _fire() {
      _fileName = $('#' + _id).val();
      var imageUrl = _getURL($('#' + _id)[0].files[0]);
      _img2Base64(imageUrl, _callBack);
   }

   var _id; // input file id
   //var _event = 'change'; // response of the event
   var _handle; // call back method
   var _blob;
   var _base64Str;
   var _fileName;
 }
}

if(typeof define === "function") {
   define(function(require, exports, module) {
      var jQuery = require('jquery');
      fun(jQuery);
      module.exports = jQuery;
   });
}
else {
   fun(jQuery);
}
})()

一个方法

private void downLoad(HttpServletResponse resp, String fileName, String base64Str) {
    resp.setContentType("application/jar; charset=utf-8");
    resp.setHeader("extension", "jar");
    resp.setHeader("Content-Disposition", "attachment;filename=\"" + fileName + "\"");
    resp.setHeader("Pragma", "");
    resp.setHeader("Cache-Control", "");
    OutputStream out = null;

    try {
       Base64 base64 = new Base64();
       byte[] byteArray = base64.decode(base64Str);

       for (byte b : byteArray) {
          if(b<0) {
             b += 256;
          }
        }

       out = resp.getOutputStream();
       out.write(byteArray);
    }
    catch(IOException e) {
       e.printStackTrace();
    }
    finally {
       if(out != null) {
          try {
             out.close();
          }
          catch(IOException e) {
             // ignore it
          }
       }
    }
 }

一个实例

<script>
   var blob = new $.Image2Blob();
   blob.setId('image');
   blob.setCallBack(cb);

   $(function() {
      $('#image').bind('change', function() {
         blob.fire();
      });
   });

   // default val is base64 String
   function cb(val) {
      // user the params do someing
      var fileName = blob.fileName();
      var base64Str = blob.base64();
      var blob = blob.blob();
    }
</script>

相关文章推荐

JavaScript——图片base64编码转化成blob对象

function convertImgDataToBlob(base64Data) { var format = "image/jpeg"; ...

HTML5上传图片base64编码显示缩略图

添加图片

jQuery使用Base64 生成图片预览和java后台不同的接收处理方式

jQuery使用Base64 生成图片预览和java后台不同的接收处理方式本文主要解决移动或者pc端上传图片及生成预览的问题 1.jQuery 生成base64编码,前台预览 2.jsp 自定义上...

图片base64与blob互转

/** * base64 转 blob 对象,文件上传 * 转载自:http://blog.csdn.net/hsany330/article/details/52575459 * @param ...

DataURL与File,Blob,canvas对象之间的互相转换的Javascript

# canvas转换为dataURL (从canvas获取dataURL) # File对象转换为dataURL、Blob对象转换为dataURL # dataURL转换为Blob对象 # da...

读取blob并把blob转base64

package com.dahong.xml.entity; public class RoadPhoto { private String no;//编号 private ...

base64图片转file文件提交

/**  * @param base64Codes  *            图片的base64编码  */ function sumitImageFile(base64Codes){  ...

javascript将base64编码的图片数据转换为file并提交

/** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ va...

基于angular图片裁剪

template/cropper.html     //自定义标签 //angular.modal .directive('cropper', [function () { ...

jQuery使用Base64 生成图片预览和java后台不同的接收处理方式

jQuery使用Base64 生成图片预览和java后台不同的接收处理方式本文主要解决移动或者pc端上传图片及生成预览的问题 1.jQuery 生成base64编码,前台预览 2.jsp 自定义上...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手工上传,下载(Blob,base64)
举报原因:
原因补充:

(最多只允许输入30个字)