js上傳圖片處理：壓縮，旋轉校正圖片

阿新 • • 發佈：2019-01-20

隨著科技發展的浪潮，手機上的攝像機的畫素越來越高，成像的效果也越來越好。到現在一張手機拍攝的圖片在 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';
}

js上傳圖片處理：壓縮，旋轉校正圖片

js上傳圖片處理：壓縮，旋轉校正圖片

html5+exif.js+canvas實現手機端照片上傳預覽、壓縮、旋轉功能

.Net上傳檔案處理三大正規化，及開發注意事項

微信js上傳圖片並展示，iphone下預覽

多次點選file上傳，資訊儲存在js集合中，不覆蓋上次點選資訊，js上傳多張圖片

JS:上傳時圖片預覽(input：type="file" :)

kindeditor編輯器圖片上傳自動加alt屬性，請看：

js 上傳圖片並轉為base64編碼+預覽圖片+壓縮

【JS】封裝相容正版IE9的上傳控制元件，支援圖片格式，圖片大小，圖片寬高驗證，支援非圖片樣式

js上傳圖片，同時生成縮圖

移動端（h5）上傳,壓縮，預覽圖片

js上傳圖片預覽，php後臺接收例項，已改寫為多圖上傳預覽

ajaxFileUpload.js上傳圖片外掛，全瀏覽器相容，規避json錯誤，帶檔案格式大小攔截

通過圖片地址，將圖片處理成base64，使用ajax上傳圖片

JS上傳圖片,利用canvas實現圖片壓縮

HTML5 之圖片上傳預處理

js 上傳圖片本地預覽緩存

springMVC圖片上傳的處理方式

js上傳圖片

js上傳文件（圖片）限制格式及大小為3M

js上傳圖片處理：壓縮，旋轉校正圖片

相關推薦