jQuery移动端多图上传(带裁剪功能)特效插件
稿源: 互联网
一款jQuery移动端多图上传,适应于手机端上传图片的功能,附带上传图片裁剪功能。
JS代码
// 显示裁剪框 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(','); };
相关插件
-
jQuery实现自定义标签复选插件效果
06月-29日
-
jQuery移动端多图上传(带裁剪功能)特效插
07月-22日
-
无法在这个位置找到: AD-M-ar.htm