前端图片转base64，转格式，转blob，上传的总结

相关文章推荐

自信的楼梯 · 预检 blob 请求 (REST API) ...· 3 周前 ·

忧郁的海龟 · JS 实现 ...· 17 小时前 ·

活泼的柚子 · blob转file ...· 6 小时前 ·

儒雅的手电筒 · java读取文件并存为blob_java ...· 6 小时前 ·

直爽的烤红薯 · java ...· 6 小时前 ·

光明磊落的眼镜 · Pytorch的cross_entropy为 ...· 10 月前 ·

聪明的瀑布 · pyperclip在PyCharm和批处理文 ...· 1 年前 ·

豪气的遥控器 · mysql将多条记录合并成一条-掘金· 1 年前 ·

狂野的火车 · SQLServer中使用索引视图(物化视图) ...· 1 年前 ·

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]);
        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上传>
<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");