JavaScript 图片压缩工具

故事：小鱼最近写了一个云盘，容许他的同窗免费上传一些图片到云盘之上。但是他最近发现服务器的某些服务怎么都启动不起来了。因而，他开始寻找缘由，最终发现是磁盘空间不足致使的。同窗们都上传了啥啊？咋那么快就没内存了呢？小鱼远程链接上服务器，将其中的图片拖到本地查看，不看不知道，一看吓一跳，全是各位“老师”的照片啊！啥波多野结衣、苍井空...应有尽有，全是高清无码大图！小鱼看了老久才晃过神，擦了擦嘴角的哈喇子。这怎么行，虽然图片很好看，可是它养分也跟不上啊！必须得限制。

image-conversion

因而小鱼决定让图片回归它应有的画质，怀着厚重的心情写下了图片压缩工具。

/** * @file 图片压缩（转换）工具 v1.0.0 * * @author xiangchengyu<x555666777@qq.com> * * Date: 2019-09-06 23:30 */
(function() {
    var core_version = '1.0.0';

    var _ImageConversion = function() {};

    _ImageConversion.prototype = {
        version: core_version,

        constructor: _ImageConversion,
        img2Canvas: function(image, config) {
            if (!image || typeof image !== 'object') return ;
            if (typeof config !== 'object') {
                throw new Error('The second parameter must be an object.');
            }

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

            cvs.width = image.width;
            cvs.height = image.height;

            if (!config.scale) {
                config.width = Number(config.width);
                config.height = Number(config.height);
                cvs.width = config.width || config.height * image.width / image.height || image.width;
                cvs.height = config.height || config.width * image.height / image.width || image.height;
            } else {
                config.scale = Number(config.scale);
                cvs.width = config.scale > 0 && config.scale < 10 ? cvs.width * config.scale : image.width;
                cvs.height = config.scale > 0 && config.scale < 10 ? cvs.height * config.scale : image.height;
            }

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

            return cvs;
        },

        canvas2DataURL: function(canvas, quality, type) {
            if (!_isSupportImage(type)) {
                type = 'image/jpeg';
            }
            return canvas.toDataURL(type, quality);
        },

        canvas2Blob: function(canvas, quality, type) {
            return new Promise(resolve => {
                canvas.toBlob(blob => { resolve(blob) }, type, quality);
            });
        },
        
        file2DataURL: function(file) {
            return new Promise(resolve => {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = e => resolve(e.target.result);
            });
        },

        dataURL2Img: function(dataURL) {
            return new Promise((resolve, reject) => {
                var image = new Image();
                image.src = dataURL;
                image.onload = () => resolve(image);
                image.onerror = () => reject(new Error('DataURL conversion to image failed.'));
            });
        },

        dataURL2Blob: function(dataURL, type) {
            var arr = dataURL.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            if (_isSupportImage(type)) {
                mime = type;
            }
            return new Blob([u8arr], { type: mime });
        },

        blob2File: function(blob, filename, options = { type: 'image/jpeg' }) {
            return new File([blob], filename, options);
        },

        url2Img: function(url) {
            return new Promise((resolve, reject) => {
                var image = new Image();
                image.src = url;
                image.onload = () => resolve(image);
                image.onerror = () => reject(new Error('Image failed to load, please check the image URL.'));
            });
        }
    };

    var _isSupportImage = function(type) {
        return ['image/jpeg', 'image/png', 'image/gif'].some(item => item === type);
    };

    window.ImageConversion = (function() {
        return new _ImageConversion();
    })();
    
})();
复制代码

使用

使用的时候看起来很复杂，其实否则，之因此没有进一步封装是由于咱的浏览器不支持 async/await ，很差操做。咱也不想用 babel 转。那咋办呢？偷个懒呗，等学会如何手写 async/await 后再来更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ImageConversion</title>
    <script src="scripts/conversion.js"></script>
</head>
<body>

    <input id="file" type="file" name="uploadImage" onchange="getCompressFile()" />

    <div id="preview" class="preview"></div>
    <script> function getCompressFile() { var file = document.getElementById('file').files[0]; console.log(file); var config = { width: 300, height: 200, scale: 1, quality: .8, type: 'image/jpeg' }; var compress = (function() { ImageConversion.file2DataURL(file).then(dataURL => { ImageConversion.dataURL2Img(dataURL).then(image => { var cvs = ImageConversion.img2Canvas(image, config); ImageConversion.canvas2Blob(cvs, config.quality, config.type).then(blob => { console.log(blob); var file = ImageConversion.blob2File(blob, 'filename', {type: config.type}); ImageConversion.file2DataURL(file).then(result => { console.log(result); }); // TODO }); }); }); })(); } </script>
</body>
</html>

复制代码