Canvas 進階（六）實現圖片壓縮功能

時間  2020-02-23
標籤 canvas 進階 實現 圖片 壓縮 功能 简体版
原文   原文鏈接

功能體驗

先看demo：圖片壓縮css

項目源碼：github前端

效果以下：webpack

實現功能

  1. 可以獲取壓縮後的 base64 圖片
  2. 可以獲取壓縮後的圖片節點，並能替換文檔中的圖片節點
  3. 可以獲取壓縮後的 canvas 進行二次繪製，並能替換文檔中的 canvas
  4. 能過獲取壓縮後的 blob 文件
  5. 可以下載壓縮後的圖片

具體實現

前端實現壓縮功能，從圖片大小和質量兩方面着手：縮小圖片和下降圖片質量git

所以咱們設計一個 imageCompress 類，傳入一個 option, 其參數有：github

file: url 或 file
width: 輸出圖片的寬度
height: 輸出圖片的高度
mineType: 輸出圖片的格式，默認爲image/png
quality: 輸出圖片的畫質。值爲0～1,默認爲1 
複製代碼

由於圖片的加載是一個異步的過程，所以咱們須要藉助 promise, 以new ImageCompress(option).then(instance => {})建立並在 then 中調用實例的方法。由於 file 能夠是 url 也能夠是 file 對象，所以在構建函數中需對這兩種狀況分別判斷，並在結束時返回 promiseweb

1. 建立此類

class imageCompress {
    constructor(options) {
        this._img = null; // 原始圖片
        this._compressedImg = null; // 壓縮後的圖片
        this._canvas = null; // 建立的canvas
        this._blob = null; // 建立的blob
        
        // 默認設置
        this.options = {
            mimeType: 'image/png',
            quality: 1,
        };
        // 合併默認參數與用戶參數
        extend(this.options, options, true);

        // 文件爲傳入拋出錯誤
        if (!options.file) {
            throw new Error('圖片未傳入');
        }

        let that = this;
        if (typeof options.file === 'string') {
            let img = (this._img = new Image());
            // 解決跨域報錯問題
            img.setAttribute('crossOrigin', 'anonymous');
            img.src = options.file;

            return new Promise((resolve, reject) => {
                img.onload = function() {
                    resolve(that);
                };
                img.onerror = function(...args) {
                    reject(new Error('圖片加載失敗'));
                };
            });
        } else if (typeof options.file === 'object' && options.file.name) {
            // 判斷文件的後綴是否爲圖片
            if (!isAssetTypeAnImage(options.file.name)) {
                throw new Error('該文件不是圖片');
            }
            let image = (this._img = new Image());
            return new Promise((resolve, reject) => {
                if (window.URL) {
                    image.src = window.URL.createObjectURL(options.file);
                } else {
                    const reader = new FileReader();
                    reader.onload = e => {
                        image.src = e.target.result;
                    };

                    reader.onabort = () => {
                        reject(
                            new Error(
                                'Aborted to load the image with FileReader.'
                            )
                        );
                    };
                    reader.onerror = () => {
                        reject(
                            new Error(
                                'Failed to load the image with FileReader.'
                            )
                        );
                    };

                    reader.readAsDataURL(options.file);
                }
                image.onload = function() {
                    resolve(that);
                };
                image.onerror = function(...args) {
                    reject(new Error('圖片加載失敗'));
                };
            });
        }
    }
}
複製代碼

2. 獲取 canvas 和與頁面 canvas 進行替換功能

咱們在構建函數中已經將傳入的圖片加載並賦值給了 this._img, 接下來建立一個 canvas, 並將此圖片按設置的大小畫出來，便獲得目標 canvas; 替換一個節點，先找出其父節點，並用一個新節點替換 oldNode.parentNode.replaceChild(newNode, oldNode);算法

// 獲取canvas,可用於二次加工繪製
getCanvas() {
    if (!this._canvas) this._imagetoCanvas();
    return this._canvas;
}
// 私有方法，圖片轉canvas
_imagetoCanvas() {
    let image = this._img;
    var cvs = (this._canvas = document.createElement('canvas'));
    var ctx = cvs.getContext('2d');
    cvs.width = this.options.width || image.width;
    // 高度默認等比例壓縮
    cvs.height = this.options.width
        ? (this.options.width * image.height) / image.width
        : image.height;
    ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
}
// 替換文檔canvas節點
replaceCanvasNode(oldNode) {
    let newNode = this.getCanvas();
    // 使新節點具備舊節點的id,類名，樣式
    newNode.style.cssText = oldNode.style.cssText;
    newNode.id = oldNode.id;
    newNode.className = oldNode.className;
    // 用新節點替換舊節點
    oldNode.parentNode.replaceChild(this.getCanvas(), oldNode);
}
複製代碼

3. 獲取壓縮後的圖片base64

前一步咱們已經可以獲取 canvas，將 canvas 調用 canvas.toDataURL(this.options.mimeType, this.options.quality)便可獲取 base64npm

getImageBase64() {
    let canvas = this.getCanvas()
    return canvas.toDataURL(this.options.mimeType, this.options.quality);
}
複製代碼

4. 獲取壓縮後的文件

獲取blob調用 canvas.toBlob(callback,mimeType,quality), 因爲此過程也是異步，所以返回 promisecanvas

// 獲取壓縮後的文件，return promise.resolve(blob)
getCompressFile() {
    if (!this._canvas) this._imagetoCanvas();
    let that = this;
    return new Promise((resolve, reject) => {
        that._canvas.toBlob(
            blob => {
                that._blob = blob;
                resolve(blob);
            },
            that.options.mimeType, // 圖片類型
            that.options.quality // 圖片質量
        );
    });
}
複製代碼

5. 獲取壓縮後的 img 節點與頁面 img 進行替換功能

令 this._compressedImg 指向壓縮後的圖片，咱們的目標是找到 image 的 src 屬性，有兩種方法 URL.createObjectURL(blob) 和 new FileReader().readAsDataURL(blob), 所以咱們需調用第 4 步實現的方法 getCompressFile 獲取 blobsegmentfault

// 獲取壓縮後的圖片節點
getCompressImageNode() {
    // 若是壓縮後的圖片已經建立，則不須要重複建立，返回便可
    if (this._compressedImg && this._compressedImg.src)
        return Promise.resolve(this._compressedImg);
    let image = (this._compressedImg = new Image());
    return this.getCompressFile().then(blob => {
        if (window.URL) {
            image.src = window.URL.createObjectURL(blob);
        } else {
            const reader = new FileReader();

            reader.onload = e => {
                image.src = e.target.result;
            };
            // 終止事件
            reader.onabort = () => {
                return Promise.reject(
                    new Error('Aborted to load the image with FileReader.')
                );
            };
            reader.onerror = () => {
                return Promise.reject(
                    new Error('Failed to load the image with FileReader.')
                );
            };

            reader.readAsDataURL(blob);
        }
        return Promise.resolve(image);
    });
}
// 替換頁面圖片
replaceImageNode(oldNode) {
    this.getCompressImageNode().then(image => {
        image.style.cssText = oldNode.style.cssText;
        image.id = oldNode.id;
        image.className = oldNode.className;
        oldNode.parentNode.replaceChild(image, oldNode);
    });
}
複製代碼

6. 下載壓縮後的文件

當 this._compressedImg 被賦值且其 src 屬性存在時，能夠直接建立 a 標籤下載；若沒有建立壓縮後的 img， 則調用上一步建立的 getCompressImageNode() 方法獲取壓縮後的 img, 再進行下載

// 下載壓縮後的文件
downloadCompressFile(name = 'compress-file') {
    if (this.blob && this._compressedImg) {
        const dataURL = this._compressedImg.src;
        const link = document.createElement('a');
        link.download = name;
        link.href = dataURL;
        link.dispatchEvent(new MouseEvent('click'));
    } else {
        this.getCompressImageNode().then(image => {
            const dataURL = image.src;
            const link = document.createElement('a');
            link.download = name;
            link.href = dataURL;
            link.dispatchEvent(new MouseEvent('click'));
        });
    }
}
複製代碼

demo 測試

對上述7個功能進行測試，效果及代碼以下：

new imageCompress({
    file:
        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1477436123,3577936229&fm=26&gp=0.jpg',
    width: 500,
    quality: 1,
    mimeType: 'image/jpeg',
})
    .then(instance => {
        // 獲取canvas，可用於自行加工繪製
        let canvas = instance.getCanvas();
        let context = canvas.getContext('2d');
        context.moveTo(100, 100);
        context.lineTo(50, 50);
        context.stroke();

        // 替換文檔中存在圖片節點
        instance.replaceImageNode(document.getElementById('img'));
        // 替換文檔中存在的canvas節點
        instance.replaceCanvasNode(document.getElementById('canvas'));
        // 獲取壓縮後生成的image節點
        instance.getCompressImageNode().then(image => {
           console.log(image)
        });

        // // 獲取壓縮後的blob文件，可用於上傳
        instance.getCompressFile().then(blob => {
           
        });
        // 獲取圖片base64
        let base64 = instance.getImageBase64();
        // 下載壓縮後文件
        // instance.downloadCompressFile();
    })
    .catch(err => {
        console.log(err);
    });
複製代碼

以上是我能想到的圖片壓縮的7個功能，若是你有想到其餘的需求，歡迎在評論區留言。若是文中有錯漏，也歡迎指出！

更多推薦

前端進階小書（advanced_front_end）

前端每日一題（daily-question）

webpack4 搭建 Vue 應用（createVue）

Canvas 進階（一）二維碼的生成與掃碼識別

Canvas 進階（二）寫一個生成帶logo的二維碼npm插件

Canvas 進階（三）ts + canvas 重寫」辨色「小遊戲

Canvas 進階（四）實現一個「刮刮樂」遊戲

Canvas 進階（五）實現圖片濾鏡效果

VUI建立日誌(一)——圖片懶加載指令的實現

VUI建立日誌(二)——防抖節流組件的實現

前端算法題目解析（一）

前端算法題目解析（二）

簡易路由實現——（hash路由）

簡易路由實現——（history路由）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程