js上传图片处理：压缩，旋转校正图片

最新推荐文章于 2024-07-12 03:25:18 发布

Hello_py

最新推荐文章于 2024-07-12 03:25:18 发布

阅读量1.7w

点赞数 9

分类专栏： javascript php 文章标签： js html5 上传图片压缩图片

本文链接：https://blog.csdn.net/qq_25237107/article/details/69292374

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

php

4 篇文章 0 订阅

订阅专栏

随着科技发展的浪潮，手机上的摄像机的像素越来越高，成像的效果也越来越好。到现在一张手机拍摄的图片在 2M 左右是很正常的。在实际的应用场景中经常需要用户上传图片这样的人机交互方式。为了提高用户体验，上传图片之前要进行压缩。部分手机拍摄的图片会带有拍摄方向（如魅族，苹果），在上传之前就需要进行图片修正。案例中使用了 html5 的一些 API 对图片进行压缩； exif.js 的 EXIF.getDate(image, callback) API 获取图片的拍摄方向判断校正。
exif.js 相关资料：
https://github.com/exif-js/exif-js
http://code.ciaoca.com/javascript/exif-js/

1、添加 change 监听事件。当用户选择好图片后，使用 FileReader 读取图片文件。
2、获取到图片后使用 exif.js 的 EXIF.getDate(image, callback) API 获取图片的拍摄方向，根据拍摄方向进行不同角度的旋转
3、根据图片大小进行判断是否需要压缩

1988

html DEMO:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.1.0.min.js"></script>
    <script src="exif.js"></script>
    <script src="image.js"></script>
</head>
<body>
<form>
    <input id="image" type="file" accept="*">
</form>
<div id="show"></div>
</body>

<script>
    $(function () {
        var async = {};
        //处理图片后进行的操作，如上传
        async.do = function () {
            var imageData = $('#show>img')[0].src;//获取base64格式的图片
            var imageData = imageData.replace(/data:image\/jpeg;base64,/,'');//去掉"data:image/jpeg;base64,"
            //上传图片
            $.post('getImage.php',{image:imageData,lrj:'hhh'},function (data) {
                console.log(data)
            })
        };
        var source = $('#image');
        var show = $('#show')
        imageProcess(source, show, async)
    })
</script>
</html>

图片质量对比

image.js:

/**
 * Created by ROOT on 2016/12/14.
 */

/**
 * @param source    图片源的表单
 * @param show      要展示图片的div
 * @param async     图片处理完成后要进行的操作，如ajax上传。等信息
 */
function imageProcess(source,show,async) {
    //监听图片源表单的改变事件
    source.change(function () {
        var files = this.files;
        if(files.length){
            var isImage = checkFile(this.files);
            if(!isImage){
                show.html("请确保文件为图像类型");
            }else{
                var reader = new FileReader();
                reader.onload = function(e){
                    var imageSize = e.total;//图片大小
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function () {
                        // 旋转图片
                        var newImage = rotateImage(image)
                        // console.log(newImage)

                        //压缩图片
                        newImage = judgeCompress(newImage,imageSize);
                        newImage.setAttribute('width','100%');
                        show.html(newImage);
                        async.do();
                    }
                }
                reader.readAsDataURL(isImage);
            }
        }
    })
}

/**
 * 检查文件是否为图像类型
 * @param files         FileList
 * @returns file        File
 */
function checkFile(files){
    console.log(files)
    var file = files[0];
    //使用正则表达式匹配判断
    if(!/image\/\w+/.test(file.type)){
        return false;
    }
    return file;
}

/**
 * 判断图片是否需要压缩
 * @param image          HTMLImageElement
 * @param imageSize      int
 * @returns {*}          HTMLImageElement
 */
function judgeCompress(image,imageSize) {

    //判断图片是否大于300000 bit
    var threshold = 300000;//阈值,可根据实际情况调整
    console.log('imageSize:'+imageSize)
    if(imageSize>threshold){
        var imageData = compress(image);

        var newImage = new Image()
        newImage.src = imageData
        return newImage;
    }else {
        return image;
    }
}

/**
 *压缩图片
 * @param image         HTMLImageElement
 * @returns {string}    base64格式图像
 */
function compress(image) {
    console.log('compress');
    console.log(image)

    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d');

    var imageLength = image.src.length;
    var width = image.width;
    var height = image.height;

    canvas.width = width;
    canvas.height = height;

    ctx.drawImage(image, 0, 0, width, height);

    //压缩操作
    var quality = 0.1;//图片质量  范围：0<quality<=1 根据实际需求调正
    var imageData = canvas.toDataURL("image/jpeg", quality);

    console.log("压缩前：" + imageLength);
    console.log("压缩后：" + imageData.length);
    console.log("压缩率：" + ~~(100 * (imageLength - imageData.length) / imageLength) + "%");
    return imageData;
}


/**
 * 旋转图片
 * @param image         HTMLImageElement
 * @returns newImage    HTMLImageElement
 */
function rotateImage(image) {
    console.log('rotateImage');

    var width = image.width;
    var height = image.height;

    var canvas = document.createElement("canvas")
    var ctx = canvas.getContext('2d');

    var newImage = new Image();

    //旋转图片操作
    EXIF.getData(image,function () {
            var orientation = EXIF.getTag(this,'Orientation');
            // orientation = 6;//测试数据
            console.log('orientation:'+orientation);
            switch (orientation){
                //正常状态
                case 1:
                    console.log('旋转0°');
                    // canvas.height = height;
                    // canvas.width = width;
                    newImage = image;
                    break;
                //旋转90度
                case 6:
                    console.log('旋转90°');
                    canvas.height = width;
                    canvas.width = height;
                    ctx.rotate(Math.PI/2);
                    ctx.translate(0,-height);

                    ctx.drawImage(image,0,0)
                    imageDate = canvas.toDataURL('Image/jpeg',1)
                    newImage.src = imageDate;
                    break;
                //旋转180°
                case 3:
                    console.log('旋转180°');
                    canvas.height = height;
                    canvas.width = width;
                    ctx.rotate(Math.PI);
                    ctx.translate(-width,-height);

                    ctx.drawImage(image,0,0)
                    imageDate = canvas.toDataURL('Image/jpeg',1)
                    newImage.src = imageDate;
                    break;
                //旋转270°
                case 8:
                    console.log('旋转270°');
                    canvas.height = width;
                    canvas.width = height;
                    ctx.rotate(-Math.PI/2);
                    ctx.translate(-height,0);

                    ctx.drawImage(image,0,0)
                    imageDate = canvas.toDataURL('Image/jpeg',1)
                    newImage.src = imageDate;
                    break;
                //undefined时不旋转
                case undefined:
                    console.log('undefined  不旋转');
                    newImage = image;
                    break;
            }
        }
    );
    return newImage;
}

getImage.php:

<?php
/**
 * Created by PhpStorm.
 * User: 6500
 * Date: 2017/4/5
 * Time: 18:10
 */

$imagePath = './uploadPicture.jpg';//图片保存路径
$image = base64_decode($_POST['image']);
$newFile = fopen($imagePath,'w');
$fwriteRes = fwrite($newFile,$image);
fclose($newFile);
if ($fwriteRes){
    echo 'success';
}

Hello_py

关注

9
点赞
踩
21

收藏

觉得还不错? 一键收藏
3
评论
js上传图片处理：压缩，旋转校正图片

随着科技发展的浪潮，手机上的摄像机的像素越来越高，成像的效果也越来越好。到现在一张手机拍摄的图片在 2M 左右是很正常的。在实际的应用场景中经常需要用户上传图片这样的人机交互方式。为了提高用户体验，上传图片之前要进行压缩。部分手机拍摄的图片会带有拍摄方向（如魅族，苹果），在上传之前就需要进行图片修正。案例中使用了 html5 的一些 API 对图片进行压缩； exif.js 的 EXIF.getD
复制链接

扫一扫

专栏目录