1. 图片文件转base64

<input accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="up" />
$(function() {
$("#up").change(function() {
var file = this.files[0];
if(undefined == file){
return ;
}
r = new FileReader();
r.readAsDataURL(file);
r.onload = function(e) {
var base64 = e.target.result; }
});
});

这样就获取到了图片文件的base64编码

可以把base64直接设置给img的src属性,用做图片回显用

2. canvas图片处理

2.1 canvas绘制图片和压缩图片

var suofang = function(base64, bili, callback) {
console.log("执行缩放程序,bili=" + bili);
//处理缩放,转格式
var _img = new Image();
_img.src = base64;
_img.onload = function() {
var _canvas = document.createElement("canvas");
var w = this.width / bili;
var h = this.height / bili;
_canvas.setAttribute("width", w);
_canvas.setAttribute("height", h);
_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
}
}

压缩图片主要是通过长宽的缩放来缩小图片

2.2 canvas转base64

var base64 = canvas.toDataURL("image/png");

  

还可以传个参数做图片质量的设置,0-1

2.3 canvas转blob

_canvas.toBlob(function(blob) {
console.log(blob.size);
}, "image/jpeg");

2.4 base转blob

function dataURItoBlob(base64Data) {
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}

3. 文件上传

1. base64上传

可以使用ajax请求,发送普通请求即可。
需要注意的是,由于base64比较长,在测试后发现java后端接受到的参数为null。所以使用JSON.stringify()把data数据转成json,在后端用@requestBody接受

2. blog上传

var fd = new FormData();
fd.append("file", blob); //fileData为自定义
$.ajax({
type: "post",
url: "/file/upload",
async: true,
data: fd,
processData: false,
contentType: false,
success: function(r) { }
});
最后附上完整的代码<图片上传-转base64-缩放-转格式-缩放到不超过1M-ajax上传>
  • html
  • <input accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="up" />
    • 业务代码
    • $(function() {
      $("#up").change(function() {
      imageDeal(this, dealChange);
      });
      })
      var dealChange = function(blob, base64) {
      var fd = new FormData();
      fd.append("file", blob); //fileData为自定义
      $.ajax({
      type: "post",
      url: "/file/upload",
      async: true,
      data: fd,
      processData: false,
      contentType: false,
      success: function(r) { }
      });
      }
      • 处理代码
      • var imageDeal = function(ele, returnBase64) {
        //获取file,转成base64
        var file = ele.files[0]; //取传入的第一个文件
        if(undefined == file) { //如果未找到文件,结束函数,跳出
        return;
        }
        console.log("fileSize" + file.size);
        console.log(file.type); var r = new FileReader();
        r.readAsDataURL(file);
        r.onload = function(e) {
        var base64 = e.target.result;
        var bili = 1.5;
        console.log("压缩前:" + base64.length);
        suofang(base64, bili, returnBase64);
        }
        }
        var suofang = function(base64, bili, callback) {
        console.log("执行缩放程序,bili=" + bili);
        //处理缩放,转格式
        var _img = new Image();
        _img.src = base64;
        _img.onload = function() {
        var _canvas = document.createElement("canvas");
        var w = this.width / bili;
        var h = this.height / bili;
        _canvas.setAttribute("width", w);
        _canvas.setAttribute("height", h);
        _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
        var base64 = _canvas.toDataURL("image/jpeg");
        _canvas.toBlob(function(blob) {
        console.log(blob.size); if(blob.size > 1024*1024){
        suofang(base64, bili, callback);
        }else{
        callback(blob, base64);
        }
        }, "image/jpeg");
        }
        }

前端图片转base64,转格式,转blob,上传的总结的更多相关文章

  1. 相册选择头像或者拍照 上传头像以NSData 图片二进制格式 表单上传

    一.点击头像图片 或者按钮 在相册选择照片返回img,网络上传头像要用data表单上传 (1)上传头像属性 // 图片二进制格式 表单上传 @property (nonatomic, strong) ...

  2. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  3. ueditor1.4.3配置过程(包含单独上传文件以及图片的使用),ueditor1.4.3上传配置(转 http://www.bkjia.com/webzh/1001016.html)

    这里使用的是ueditor1.4.3的jsp版本的UTF-8版本. 首先下载相应的ueditor,将ueditor文件夹直接拷贝到项目中,文件结构如下所示: 然后将项目要用的jar包导入到lib目录下 ...

  4. ebay商品基本属性组合成数据表格式,可用上传到系统递交数据

    该刊登表设计是利用VB写的,当时因为两个系统的数据不能直接对接,又copy并且组合SKU,一个表格一个表格填写,比较麻烦,还好刊登系统可以允许用excel表格上传数据 所以就下好模板,学了VB语言,在 ...

  5. 【转】前端图片该保存为什么格式?png or jpg?

    疑虑: 图片存储为web格式,该用什么格式保存呢?png?jpg?压缩比例该为多大?css spript的优劣?有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低.了解图片 ...

  6. canvas前端压缩图片和视频首屏缩略图并上传到服务器

    图片: var img = document.createElement('img') img.src = window.URL.createObjectURL(fileObj.file) // 加载 ...

  7. js中将文件的base64转换成file并上传到服务器

    ** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ var form=document.for ...

  8. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  9. php 图片操作类,支持生成缩略图,添加水印,上传缩略图

    <?php class Image {     //类开始     public $originimage = ""; //源图片文件地址     public $image ...

随机推荐

  1. 6.spring:AOP(注解)

     spring Aop AOP面向切面编程,与OOP面向对象编程相辅相成 AOP中最基本的单元是切面 问题: 代码混乱:越来越多的业务需求(日志&验证)加入后,原有的业务方法急剧膨胀,每个方法 ...

  2. Redis配置文件(3)常见的配置修改

    常见的配置: redis.conf 配置项说明如下: 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程   daemonize no   2. 当Redis以 ...

  3. .ne 基础(2)

    类是一种抽象 抽象的概念,具体的实例. 现实是先有对象,再抽象成类,再用类来创建实例 构造方法 (1)如果写好了类,不写构造方法,系统会默认一个无参的构造方法 (2) 如果手动添加了一个 构造方法,就 ...

  4. 十五、详述 IntelliJ IDEA 插件的安装及使用方法

    正文 首先,进入插件安装界面: Mac:IntelliJ IDEA -> Preferences -> Plugins; Windows:File -> Settings -> ...

  5. MVC学习十四:MVC 路由 Route

    一.MVC路由(Route)是什么? MVC路由(Route)可以理解规定用户访问网站方式的配置文件,就例如:我们在访问普通页面时http://xxxx/web/xx.aspx,但在MVC中我们的访问 ...

  6. HDU 1273 漫步森林(数学 找规律)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1273 漫步森林 Time Limit: 2000/1000 MS (Java/Others)    M ...

  7. hadoop-1.2.1运行过程中遇到的问题

    在hadoop-1.2.1中运行所遇到的问题: 2014-11-14   22:43:42  在服务器上运行hadoop-1.2.1中的datanode,出现了内存占用过大,导致ssh登陆出现如下问题 ...

  8. Python 学习笔记(十二)Python文件和迭代(一)

    文件 文件和文件夹 文件:文本文件.二进制文件 文件夹:(windows) G:\pythonWorkspace\python\study (linux/mac) /home/workspace/py ...

  9. ABAP术语-R/3 Repository Information System

    R/3 Repository Information System 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/11/1100076.ht ...

  10. JS DOM 1

    接触JS也有快一个月了,现在来总结一下看过的书,一本本总结,之后再融会贯通,也许更有助于学习.废话不多说,现在看的是<JavaScript DOM编程艺术>,该书挺薄的,不太会望而生畏,( ...