jq 移动端网页分享功能_jQuery移动端多图上传(带裁剪功能)

插件描述：适应于手机端上传图片的功能，附带上传图片裁剪功能

// 显示裁剪框

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 

var a = Math.floor(n * Math.random());

key += str.charAt(a);

i++;

}

return key

};

// 添加上传的图片

PictureEdit.prototype.addPics = function() {

var thumb = $('

x

'),

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(',');

};