记得上下班打卡 | git大法好，push需谨慎

Skip to content

L
liquidnet-bus-v1
Commit 556ed32f authored by wangyifan's avatar wangyifan
Browse files
Options

admin-设置新版banner 设置固定宽高裁剪

parent 2e29584a
Show whitespace changes
Inline Side-by-side
Showing with 126 additions and 6 deletions
liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/store/homeSet/topBanner.html
View file @ 556ed32f
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<th:block th:include="include :: header('顶部banner')" /> <th:block th:include="include :: header('顶部banner')" />
<th:block th:include="include :: bootstrap-fileinput-css" /> <th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: cropper-css" />
<style> <style>
.home_page { .home_page {
display: flex; display: flex;
...@@ -160,9 +161,16 @@ ...@@ -160,9 +161,16 @@
</div> </div>
</div> --> </div> -->
</div> </div>
<div id="bannerCropModal" style="display:none;padding:16px;">
<div class="banner-crop-box" style="width:764px;height:320px;overflow:hidden;margin:0 auto;background:#f5f5f5;">
<img id="bannerCropImg" src="" alt="">
</div>
<p style="text-align:center;color:#888;margin:10px 0 0;">请裁剪为 764×192（宽高比4:1）</p>
</div>
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js" /> <th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include :: bootstrap-suggest-js" /> <th:block th:include="include :: bootstrap-suggest-js" />
<th:block th:include="include :: cropper-js" />
<script th:inline="javascript"> <script th:inline="javascript">
var prefix2 = ctx + "local"; var prefix2 = ctx + "local";
var platformUrl = [[${platformUrl}]]; var platformUrl = [[${platformUrl}]];
...@@ -544,6 +552,32 @@ ...@@ -544,6 +552,32 @@
type: 'datetime' type: 'datetime'
}); });
}); });
if (type == 3) {
$("#fileinput"+num+"").fileinput({
'theme': 'explorer-fas',
'uploadUrl': platformUrl + "/platform/basicServices/alOss/upload",
"uploadExtraData": {
"pathName" : "banner",
"buckType" : 1
},
autoReplace: true,
showCaption: false,
showPreview: false,
showRemove: false,
showUpload: false,
showCancel: false,
showClose: false,
dropZoneTitle: "请上传文件",
maxFileCount: 1
}).on("filebatchselected", function (event, files) {
if (!files || !files[0]) {
return;
}
openBannerCrop(files[0], num);
$(this).fileinput('clear');
});
return;
}
$("#fileinput"+num+"").fileinput({ $("#fileinput"+num+"").fileinput({
'theme': 'explorer-fas', 'theme': 'explorer-fas',
// 'uploadUrl': "https://devplatform.zhengzai.tv/platform/basicServices/alOss/upload", // 'uploadUrl': "https://devplatform.zhengzai.tv/platform/basicServices/alOss/upload",
...@@ -562,12 +596,12 @@ ...@@ -562,12 +596,12 @@
autoReplace: true, autoReplace: true,
minImageWidth: '764', minImageWidth: '764',
maxImageWidth: '764', maxImageWidth: '764',
minImageHeight: type == 3 ? '192' : '1018', minImageHeight: '1018',
maxImageHeight: type == 3 ? '192' : '1018', maxImageHeight: '1018',
previewSettings: { previewSettings: {
image: { image: {
width: '764px', width: '764px',
height: type == 3 ? '192px' : '1018px' height: '1018px'
} }
}, },
dropZoneTitle: "请上传文件", dropZoneTitle: "请上传文件",
...@@ -583,9 +617,6 @@ ...@@ -583,9 +617,6 @@
console.log($("#testImg").height(),$("#testImg").width()) console.log($("#testImg").height(),$("#testImg").width())
if ($("#testImg").height() != 1018) return layer.msg('图片规格不符合要求'); if ($("#testImg").height() != 1018) return layer.msg('图片规格不符合要求');
if ($("#testImg").width() != 764) return layer.msg('图片规格不符合要求'); if ($("#testImg").width() != 764) return layer.msg('图片规格不符合要求');
} else if (type == 3) {
if ($("#testImg").width() != 764) return layer.msg('图片规格不符合要求，需764×192');
if ($("#testImg").height() != 192) return layer.msg('图片规格不符合要求，需764×192');
} else { } else {
if ($("#testImg").width() != 382) return layer.msg('图片规格不符合要求'); if ($("#testImg").width() != 382) return layer.msg('图片规格不符合要求');
} }
...@@ -593,6 +624,95 @@ ...@@ -593,6 +624,95 @@
}, 500) }, 500)
}) })
} }
var bannerCropper = null;
var bannerCropTargetNum = 0;
function openBannerCrop(file, targetNum) {
if (!file || !/^image\/\w+$/.test(file.type)) {
return layer.msg('请选择图片文件');
}
bannerCropTargetNum = targetNum;
var reader = new FileReader();
reader.onload = function (e) {
layer.open({
type: 1,
title: '裁剪图片（764×192，宽高比4:1）',
area: ['820px', '480px'],
content: $('#bannerCropModal'),
btn: ['确定', '取消'],
yes: function (index) {
confirmBannerCrop(index);
},
success: function () {
$('#bannerCropImg').attr('src', e.target.result);
if (bannerCropper) {
bannerCropper.destroy();
bannerCropper = null;
}
bannerCropper = new Cropper(document.getElementById('bannerCropImg'), {
aspectRatio: 764 / 192,
viewMode: 1,
autoCropArea: 0.9,
dragMode: 'move'
});
},
end: function () {
if (bannerCropper) {
bannerCropper.destroy();
bannerCropper = null;
}
$('#bannerCropImg').attr('src', '');
}
});
};
reader.readAsDataURL(file);
}
function confirmBannerCrop(layerIndex) {
if (!bannerCropper) {
return layer.msg('裁剪框加载中,请稍后...');
}
bannerCropper.getCroppedCanvas({ width: 764, height: 192 }).toBlob(function (blob) {
var formdata = new FormData();
formdata.append('file', blob, 'banner.jpg');
formdata.append('pathName', 'banner');
formdata.append('buckType', 1);
$.ajax({
url: platformUrl + "/platform/basicServices/alOss/upload",
data: formdata,
type: 'post',
processData: false,
contentType: false,
success: function (res) {
if (res && res.data && res.data.ossPath) {
$("#viewImg" + bannerCropTargetNum).attr('src', 'https://img.zhengzai.tv/' + res.data.ossPath);
layer.close(layerIndex);
} else {
layer.msg((res && res.msg) || '上传失败');
}
},
error: function () {
layer.msg('上传失败');
}
});
}, 'image/jpeg', 0.92);
}
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function(callback, type, quality) {
var canvas = this;
setTimeout(function() {
var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
var len = binStr.length;
var arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {
type: type || 'image/png'
}));
});
}
});
}
function promiseMethods(url,type,data,contentType) { function promiseMethods(url,type,data,contentType) {
return new Promise((resolve,reject)=>{ return new Promise((resolve,reject)=>{
$.ajax({ $.ajax({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment