素材牛

带裁剪功能的jQuery移动端多图上传

 所属分类:网页特效-图片裁剪,上传

 浏览:345次-  下载:3次-  评论:2次-  发布时间:2018-09-25
带裁剪功能的jQuery移动端多图上传兼容IE11
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:适应于手机端上传图片的功能,附带上传图片裁剪功能,非常的实用

详细介绍

// 显示裁剪框
PictureEdit.prototype.showCropBox = function() {
    this.cropBox.show();
    this.btnGroup.show();
    this.cropGroup.show();
};
// 隐藏裁剪框
PictureEdit.prototype.hideCropBox = function() {
    this.cropBox.hide();
    this.btnGroup.hide();
    this.cropGroup.hide();
    this.preImg.cropper('destroy');
};
// 处理上传图片(选择裁剪比例)
PictureEdit.prototype.changeCropScale = function() {
    var that = this;
    that.cropGroup.on('change', 'input', function() {
        var scale = this.value.split('/');
        that.preImg.cropper('destroy');
        that.preImg.cropper($.extend(that.cropOption, {
            aspectRatio: scale[0] / scale[1]
        }));
    });
 
};
// 处理上传图片(裁剪,缩放)
PictureEdit.prototype.crop = function() {
    var that = this;
    // 取消裁剪
    that.cancel();
 
    // 确认裁剪
    that.cropBtn.click(function() {
        that.addPics();
        that.hideCropBox();
    });
};
// 取消上传图片
PictureEdit.prototype.cancel = function() {
    var that = this;
    that.cancelCropBtn.click(function() {
        that.hideCropBox();
    });
};
// 生成上传图片的key
PictureEdit.prototype.getFileKey = function() {
    var str = '0123456789abcdefghijklmnopqrstuvwxyz',
        n = str.length,
        key = "",
        i = 1;
    while (i < n) {
        var a = Math.floor(n * Math.random());
        key += str.charAt(a);
        i++;
    }
    return key
};
// 添加上传的图片
PictureEdit.prototype.addPics = function() {
    var thumb = $('<div ><i>x</i></div>'),
        key = this.getFileKey(),
        data = '';
    this.cropImg = this.preImg.cropper('getCroppedCanvas', {
        width: 200,
        height: 200
    });
    data = this.cropImg.toDataURL();
    thumb.css('backgroundImage', 'url(' + data + ')').attr('key', key);
    thumb.Before(this.uploadBtnWrap);
    this.pics[key] = data.split(',').pop();
};
// 删除上传的图片
PictureEdit.prototype.delPics = function() {
    var that = this;
 
    that.imageWrap.on('click', 'i', function() {
        var parent = $(this).parent('.item'),
            key = parent.attr('key');
        parent.remove();
        that.pics[key];
    });
 
};
// 获取全部base64数据
PictureEdit.prototype.getPicsData = function() {
    var arr = [];
    $.each(this.pics, function(i, n) {
        arr.push(n);
    });
    return arr.join(',');
};

讨论这个素材(2)回答他人问题或分享使用心得会奖励牛币

thomas
2018年09月26日

正好要用到,非常不错,现在出找找PHP后端的

回复
2199301988
2018年11月21日

正好要用到

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:3
所需牛币:10 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证