js实现对上传图片的路径转成base64编码，并且对图片进行压缩，实现预览功能

最新推荐文章于 2024-07-29 14:17:59 发布

哎呦喂1111

最新推荐文章于 2024-07-29 14:17:59 发布

阅读量2.8k

点赞数 1

分类专栏： web前端文章标签： js实现对上传图片的路径转成base64编码，并且对图片进行

web前端专栏收录该内容

203 篇文章 3 订阅

订阅专栏

js实现对上传图片的路径转成base64编码，并且对图片进行压缩，实现预览功能

需要先引入jquery: <script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script>

1、html如下

    <body>

<input type="file" id="upLoad" name="image" >

<!-- 显示上传之后的图片 -->

<div id='previewImg'>

<img src="" id='viewImg'/>

</div>

</body>

2、css如下

    #previewImg{

background-color: black;

width: 400px;

height:400px;

display: table-cell;

vertical-align: middle;

text-align: center;

}


#previewImg img{

max-height: 100%;

max-width: 100%;

}


#upLoad{

margin-bottom: 20px;

}

3、js如下

$(function(){

    $('#upLoad').on('change',function(){

    var filePath = $(this).val(), //获取到input的value，里面是文件的路径

    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),

    imgBase64 = '', //存储图片的imgBase64

    fileObj = document.getElementById('upLoad').files[0];
 //上传文件的对象,要这样写才行，用jquery写法获取不到对象


// 检查是否是图片

if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
    
    alert('上传错误,文件格式必须为：png/jpg/jpeg');

    return;

}


// 调用函数，对图片进行压缩

compress(fileObj,function(imgBase64){

    imgBase64 = imgBase64; //存储转换的base64编码

        $('#viewImg').attr('src',imgBase64); //显示预览图片

    });

});


// 不对图片进行压缩，直接转成base64

function directTurnIntoBase64(fileObj,callback){

var r = new FileReader();

// 转成base64

r.onload = function(){

//变成字符串

imgBase64 = r.result;

console.log(imgBase64);

callback(imgBase64);

}

r.readAsDataURL(fileObj); //转成Base64格式

}


// 对图片进行压缩

function compress(fileObj, callback) {

if ( typeof (FileReader) === 'undefined') {

console.log("当前浏览器内核不支持base64图标压缩");

//调用上传方式不压缩

directTurnIntoBase64(fileObj,callback);

} else {

try {

var reader = new FileReader();

reader.onload = function (e) {

var image = $('<img/>');

image.load(function(){

square = 700, //定义画布的大小，也就是图片压缩之后的像素

canvas = document.createElement('canvas'),

context = canvas.getContext('2d'),

imageWidth = 0, //压缩图片的大小

imageHeight = 0,

offsetX = 0,

offsetY = 0,

data = '';


canvas.width = square;

canvas.height = square;

context.clearRect(0, 0, square, square);


if (this.width > this.height) {

imageWidth = Math.round(square * this.width / this.height);

imageHeight = square;

offsetX = - Math.round((imageWidth - square) / 2);

} else {

imageHeight = Math.round(square * this.height / this.width);

imageWidth = square;

offsetY = - Math.round((imageHeight - square) / 2);

}

context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);

var data = canvas.toDataURL('image/jpeg');

//压缩完成执行回调

callback(data);

});

image.attr('src', e.target.result);

};

reader.readAsDataURL(fileObj);

}catch(e){

console.log("压缩失败!");

//调用直接上传方式 不压缩

directTurnIntoBase64(fileObj,callback);

}

}

}

});

4、显示效果如下：

未上传前的效果图