zoukankan      html  css  js  c++  java
  • 基于canvas的前端图片压缩

    /*common*/
    /**
     * canvas图片压缩
     * @param  {[Object]} opt [配置参数]
     * @param  {[Function]} cbk [回调函数]
     * @return {[Void]}
     * example:
     * var opt = {
        'type' : 1,//为1为预览,建议不为1或后期进行改进
        'file' : "#loadFile"//文件上传控件
    },_compress = require('app/compress');
    _compress(opt,function (result) {
        console.log(result)
    });
     */
    function writeDom (opt,cbk) {
        var _opt = opt,
            _cbk = cbk;
        $('#img,#_canvas,#img-c').remove();
        $('body').append($('<canvas id="_canvas" style="display: none;"></canvas><img id="img-c" src="" style="display:none;"/><img id="img" src="" style="300px;"/>'));
        _image = new Image();
        _image.src = _opt.src || "";
        $('#img-c').attr('src',_opt.src)[0].onload = function(){
            var _this = $(this);
            var _canvas=document.getElementById('_canvas');
            _canvas.width = _this.width();
            _canvas.height = _this.height();
            var _context=_canvas.getContext('2d');
            _context.drawImage(_image,0,0);
            if (_opt.type) {$('#img').attr('src',_canvas.toDataURL('image/jpeg',_opt.scale));};
            _cbk(_canvas.toDataURL('image/jpeg',_opt.scale));
        };
    }
    var result = '';
    return function(opt,cbk){
        var _opt = {
            'type' : opt.type || 0,
            'file' : opt.file ? $(opt.file) : $("#loadFile")
        },
        _file = _opt.file,
        _cbk = cbk || function(){};
        _file.change(function(){
            var file = $(this)[0].files[0];
            var fReader = new FileReader();
            fReader.readAsDataURL(file);
            fReader.onload = function (e){
                var _num = +prompt('请输入压缩比例');
                if (isNaN(_num)) {_num = 1};
                _opt.scale = _num;
                result = _opt.src = this.result;
                writeDom(_opt,_cbk);
            };
        });
    }

    奋力的成为前端的一朵奇葩。。。

  • 相关阅读:
    js 兼容各类手机 的写法 待续
    css 兼容 各类手机的写法 待续
    数组的解构赋值
    let 和 const 命令
    ECMAScript 6 简介
    webpack4新建一个项目
    Webpack 4 Tutorial: from 0 Conf to Production Mode
    webpack4.1.1的使用详细教程
    git merge git pull时候遇到冲突解决办法git stash
    Git 常用命令速查表(图文+表格)
  • 原文地址:https://www.cnblogs.com/xiao-yao/p/3608223.html
Copyright © 2011-2022 走看看