1、上传图片并进行裁剪的重要地方
class="btn btn-danger plupload cropper"
plupload //点击上传按钮上传图片
cropper //图片裁剪
<div class="form-group">
<label for="c-字段" class="control-label col-xs-12 col-sm-2">(名称):</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-字段" class="form-control" size="35" name="row[字段]" type="text" value="" >
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="faupload-字段" class="btn btn-danger plupload cropper" data-input-id="c-字段" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-字段"><i class="fa fa-uploadname"></i> {:__('Upload')}</button></span>
<span><button type="button" id="fachoose-字段" class="btn btn-primary fachoose" data-input-id="c-字段" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right"></span>
</div>
<ul class="row list-inline faupload-preview" id="p-字段"></ul>
</div>
</div>
参考网站:https://www.fastadmin.net/store/cropper.html
2、图片放大功能
formatter: function(value){
return "<a href='javascript:void(0)' data-tips-image='"+value+"'><img src='"+value+"' class='img-sm img-center' ></a>";
}},
//列表图片放大功能
table.on('post-body.bs.table', function (e, settings, json, xhr) {
// 预览图弹出处理
$('img').parent('a').attr('href','javascript:;');//去掉图片oss连接地址
$('img').bind('click',function(){
var imgs = $(this).parents('td').find('a img');
var dataJson = [],item={};
for (var i = 0; i < imgs.length; i++) {
item['alt'] = '';
item['pid'] = Math.random()*10;
item['src'] = item['thumb'] = $(imgs[i]).attr('src');
dataJson.push(item);
item = {}; // 重置
}
var json = {
"title": "", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号,默认0
"data": dataJson
};
Layer.photos({
photos: json,
anim: 0 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
})
});