素材牛VIP会员

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

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

 浏览:2632次  评论:5次  更新时间:2018-09-25
牛币素材VIP可免积分下载
带裁剪功能的jQuery移动端多图上传兼容IE11
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:适应于手机端上传图片的功能,附带上传图片裁剪功能,非常的实用

详细介绍

// 显示裁剪框
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(',');
};

相关素材 - 图片裁剪,上传

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

th***as  
2018年09月26日

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

回复
21***88  
2018年11月21日

正好要用到

回复
he***ao  
2019年07月02日

要是有后台一起就好了,谢谢

回复
简***1  
2019年08月14日

手机端缩放的时候,图片一闪就没有了,要怎么解决呢?

素材牛:经测试IOS微信内置浏览没有问题
回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:10 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)