blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-05 19:41:44 +08:00
Code Issues Projects Releases Wiki Activity

增加图片裁剪参数

Browse Source 
data-cut-width
data-cut-height
This commit is contained in:
Anyon 2022-07-11 19:23:45 +08:00
parent 77641b101c
commit 43a2e04f03
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/admin/view/api/upload.js
View File

@ -15,6 +15,8 @@ define(['md5', 'notify'], function (SparkMD5, Notify, allowMime) {
this.option.quality = parseFloat(this.option.elem.data('quality') || '1.0'); this.option.quality = parseFloat(this.option.elem.data('quality') || '1.0');
this.option.maxWidth = parseInt(this.option.elem.data('max-width') || '0'); this.option.maxWidth = parseInt(this.option.elem.data('max-width') || '0');
this.option.maxHeight = parseInt(this.option.elem.data('max-height') || '0'); this.option.maxHeight = parseInt(this.option.elem.data('max-height') || '0');
this.option.cutHeight = parseInt(this.option.elem.data('cut-height') || '0');
this.option.cutHeight = parseInt(this.option.elem.data('cut-height') || '0');
/*! 查找表单元素, 如果没有找到将不会自动写值 */ /*! 查找表单元素, 如果没有找到将不会自动写值 */
if (!this.option.elem.data('input') && this.option.elem.data('field')) { if (!this.option.elem.data('input') && this.option.elem.data('field')) {
@ -36,6 +38,8 @@ define(['md5', 'notify'], function (SparkMD5, Notify, allowMime) {
file.quality = that.option.quality; file.quality = that.option.quality;
file.maxWidth = that.option.maxWidth; file.maxWidth = that.option.maxWidth;
file.maxHeight = that.option.maxHeight; file.maxHeight = that.option.maxHeight;
file.cutWidth = that.option.cutWidth;
file.cutHeight = that.option.cutHeight;
}); });
that.adapter.event('upload.choose', obj.items); that.adapter.event('upload.choose', obj.items);
that.adapter.upload(obj.items, done); that.adapter.upload(obj.items, done);
@ -75,10 +79,10 @@ define(['md5', 'notify'], function (SparkMD5, Notify, allowMime) {
// 禁传异常状态文件 // 禁传异常状态文件
if (typeof file.xstate === 'number' && file.xstate === -1) return; if (typeof file.xstate === 'number' && file.xstate === -1) return;
// 图片限宽限高压缩 // 图片限宽限高压缩
if (/^image\//.test(file.type) && (file.maxWidth > 0 || file.maxHeight > 0 || file.quality !== 1)) { if (/^image\//.test(file.type) && (file.maxWidth + file.maxHeight + file.cutWidth + file.cutHeight > 0 || file.quality !== 1)) {
require(['compressor'], function (Compressor) { require(['compressor'], function (Compressor) {
new Compressor(file, { new Compressor(file, {
quality: file.quality, maxWidth: file.maxWidth, maxHeight: file.maxHeight, success(blob) { quality: file.quality, resize: 'cover', width: file.cutWidth || 0, height: file.cutHeight || 0, maxWidth: file.maxWidth, maxHeight: file.maxHeight, success(blob) {
files[index] = blob, blob.index = file.index, files[index].notify = file.notify; files[index] = blob, blob.index = file.index, files[index].notify = file.notify;
that.hash(files[index]).then(function (file) { that.hash(files[index]).then(function (file) {
that.event('upload.hash', file).request(file, done); that.event('upload.hash', file).request(file, done);

12
public/static/admin.js
View File

@ -584,11 +584,7 @@ $(function () {
return this.each(function () { return this.each(function () {
if ($(this).data('inited')) return true; else $(this).data('inited', true); if ($(this).data('inited')) return true; else $(this).data('inited', true);
var $in = $(this), $bt = $('<a data-file class="uploadimage uploadvideo"><span class="layui-icon">&#x1006;</span><span class="layui-icon">&#xe615;</span></a>').data('input', this); var $in = $(this), $bt = $('<a data-file class="uploadimage uploadvideo"><span class="layui-icon">&#x1006;</span><span class="layui-icon">&#xe615;</span></a>').data('input', this);
$bt.attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'mp4') $bt.attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'mp4').find('span').on('click', function (event) {
.attr('data-max-width', $in.data('max-width'))
.attr('data-max-height', $in.data('max-height'))
.find('span').on('click', function (event) {
event.stopPropagation(); event.stopPropagation();
if ($(this).index() === 0) $bt.attr('style', ''), $in.val(''); else $in.val() && $.previewImage(encodeURI($in.val())); if ($(this).index() === 0) $bt.attr('style', ''), $in.val(''); else $in.val() && $.previewImage(encodeURI($in.val()));
}), $in.on('change', function () { }), $in.on('change', function () {
@ -611,7 +607,8 @@ $(function () {
event.stopPropagation(), $bt.attr('style', ''), $in.val(''); event.stopPropagation(), $bt.attr('style', ''), $in.val('');
}).find('[data-file]').data('input', this).attr({ }).find('[data-file]').data('input', this).attr({
'data-size': $in.data('size') || 0, 'data-type': $in.data('type') || 'gif,png,jpg,jpeg', 'data-size': $in.data('size') || 0, 'data-type': $in.data('type') || 'gif,png,jpg,jpeg',
'data-max-width': $in.data('max-width') || 0, 'data-max-height': $in.data('max-height') || 0 'data-max-width': $in.data('max-width') || 0, 'data-max-height': $in.data('max-height') || 0,
'data-cut-width': $in.data('cut-width') || 0, 'data-cut-height': $in.data('cut-height') || 0,
}); });
}); });
}; };
@ -624,7 +621,8 @@ $(function () {
var ims = this.value ? this.value.split('|') : [], $in = $(this).after($bt); var ims = this.value ? this.value.split('|') : [], $in = $(this).after($bt);
$bt.find('[data-file]').attr({ $bt.find('[data-file]').attr({
'data-size': $in.data('size') || 0, 'data-type': $in.data('type') || 'gif,png,jpg,jpeg', 'data-size': $in.data('size') || 0, 'data-type': $in.data('type') || 'gif,png,jpg,jpeg',
'data-max-width': $in.data('max-width') || 0, 'data-max-height': $in.data('max-height') || 0 'data-max-width': $in.data('max-width') || 0, 'data-max-height': $in.data('max-height') || 0,
'data-cut-width': $in.data('cut-width') || 0, 'data-cut-height': $in.data('cut-height') || 0,
}).on('push', function (evt, src) { }).on('push', function (evt, src) {
ims.push(src), $in.val(ims.join('|')), showImageContainer([src]); ims.push(src), $in.val(ims.join('|')), showImageContainer([src]);
}) && (ims.length > 0 && showImageContainer(ims)); }) && (ims.length > 0 && showImageContainer(ims));