HTML5 圖片本地壓縮上傳插件「localResizeIMG」

時間 2019-11-21

標籤 html5 html 圖片本地壓縮上傳插件 localresizeimg 欄目 HTML5 简体版

原文原文鏈接

移動應用中用戶每每須要上傳照片，可是用戶上傳的照片尺寸一般很大，而手機的流量卻頗有限，因此在上傳前對圖像進行壓縮是頗有必要的。javascript

原生應用能夠直接對文件進行處理，網頁應用就沒有這個優點了。不過 canvas 的出現給出一條新的思路，將圖像按照比例繪製到畫布上，最後將繪製完成的畫布以 base64 編碼方式發送到服務端，再由服務端進行解析還原成圖片。php

因爲進行處理的過程較爲複雜，因而 localResizeIMG 就孕育而生了，它簡化了前端壓縮圖片的步驟，減輕了前端工程師的工做負擔。Github：https://github.com/think2011/localResizeIMGhtml

localResizeIMG 插件的優點：前端

　　通過大量測試，特別適合在移動設備上使用
　　會根據對應設備自動載入JS文件，節省寬帶
　　基於原生 JavaScript 編寫，支持 AMD 規範

localResizeIMG 的獲取方式：java

　　GitHub：https://github.com/think2011/localResizeIMG
　　NPM命令：npm install lrz
　　BOWER：bower install lrz

======================前端代碼=========================jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>localResizeIMG</title>
    <!--引入JQuery 用於異步上傳圖片-->
    <script type="text/javascript" src="dist/jquery-3.1.1.min.js"></script>
    <!--引入 lrz 插件 用於壓縮圖片-->
    <script type="text/javascript" src="dist/lrz.bundle.js"></script>
</head>
<body>
<input type="file" accept="image/jpeg" capture="camera">
</body>
<script>
    $("input[type=file]").change(function () {
        /* 壓縮圖片 */
        lrz(this.files[0], {
            width: 300 //設置壓縮參數
        }).then(function (rst) {
            /* 處理成功後執行 */
            rst.formData.append('base64img', rst.base64); // 添加額外參數
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: rst.formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $("<img />").attr("src", data).appendTo("body");
                }
            });
        }).catch(function (err) {
            /* 處理失敗後執行 */
        }).always(function () {
            /* 必然執行 */
        })
    })
</script>
</html>

引入插件：<script type="text/javascript" src="dist/lrz.bundle.js"></script>git

綁定事件：$("input[type=file]").change(function () {/* 壓縮上傳處理 */});github

壓縮圖片：lrz(file, [options]);ajax

　　file 經過 input:file 獲得的文件，或者直接傳入圖片路徑npm

　　[options] 這個參數容許忽略

　　　　width {Number} 圖片最大不超過的寬度，默認爲原圖寬度，高度不設定時會適應寬度

　　　　height {Number} 圖片的最大高度，默認爲原圖高度

　　　　quality {Number} 圖片壓縮質量，取值 0 - 1，默認爲 0.7

　　　　fieldName {String} 後端接收的字段名，默認：file

返回結果：promise 對象

　　then(rst) 處理成功後執行

　　　　rst.formData 後端可處理的數據

　　　　rst.file 壓縮後的file對象，若是壓縮率過低，將會是原始file對象

　　　　rst.fileLen 生成後的圖片的大小，後端能夠經過此值來校驗是否傳輸完整

　　　　rst.base64 生成後的圖片base64，後端能夠處理此字符串爲圖片，也能夠直接用於 img.src = base64

　　　　rst.base64Len 生成後的base64的大小，後端能夠經過此值來校驗是否傳輸完整

　　　　rst.origin 也就是原始的file對象，裏面存放了一些原始文件的信息，例如大小、日期等

異步上傳：processData 和 contentType 必須設爲 false，不然服務端不會響應

======================後端代碼=========================

<?php
$base64_image_content = $_POST['base64img'];
$output_directory = './image'; //設置圖片存放路徑

/* 檢查並建立圖片存放目錄 */
if (!file_exists($output_directory)) {
    mkdir($output_directory, 0777);
}

/* 根據base64編碼獲取圖片類型 */
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
    $image_type = $result[2]; //data:image/jpeg;base64,
    $output_file = $output_directory . '/' . md5(time()) . '.' . $image_type;
}

/* 將base64編碼轉換爲圖片編碼寫入文件 */
$image_binary = base64_decode(str_replace($result[1], '', $base64_image_content));
if (file_put_contents($output_file, $image_binary)) {
    echo $output_file; //寫入成功輸出圖片路徑
}