帝国CMS 整合在线图片裁剪插件croppic实现标题图片、文章封面裁剪功能
微wx笑
2020-05-07【帝国CMS】
6
0关键字：
标题图片、文章封面实现了选择文章内容中的图片功能，但是通常文章中的图片都比较大，不做裁剪的话直接拿来做缩略图会导致列表页面加载速度变慢，所以整合了在线图片裁剪插件crop
标题图片、文章封面实现了选择文章内容中的图片功能，但是通常文章中的图片都比较大，不做裁剪的话直接拿来做缩略图会导致列表页面加载速度变慢，所以整合了在线图片裁剪插件croppic实现标题图片、文章封面裁剪的功能。
效果如下：
实现上要在“选择文章内容中的图片功能”的基础上，添加代码。
1、进入后台管理系统-》系统》数据表与系统模型》管理数据表，根据你使用的数据表，选择对应的管理字段
2、找到标题图片字段，点击修改系统字段
3、在“输入表单替换html代码”输入框中替换为以下代码：
<?php
$ts = '';
if ($_GET["dbg"] == "1"){
$ts = "?ts=".time();
}
?><input name="titlepic" type="text" id="titlepic" value="<?=$ecmsfirstpost==1?"":ehtmlspecialchars(stripSlashes($r[titlepic]))?>" size="45">
<a onclick="window.open('ecmseditor/FileMain.php?type=1&classid=<?=$classid?>&infoid=<?=$id?>&filepass=<?=$filepass?>&sinfo=1&doing=1&field=titlepic<?=$ecms_hashur[ehref]?>','','width=700,height=550,scrollbars=yes');" title="选择已上传的图片">
<img src="../data/images/changeimg.gif" border="0" align="absbottom"></a><script src="/e/extend/croppic/titlepic.js<?=$ts?>"></script>
<link href="/e/extend/croppic/titlepic.css<?=$ts?>" rel="stylesheet"><script type="text/javascript" charset="utf-8" src="/e/extend/croppic/jquery.mousewheel.min.js">
</script><script type="text/javascript" charset="utf-8" src="/e/extend/croppic/croppic.js<?=$ts?>"></script><link href="/e/extend/croppic/croppic.css<?=$ts?>" rel="stylesheet">
<a onclick="selectTitlepic(this);" title="选择文章内容中的图片" href="javascript:void(0);"><img src="../data/images/select.png" border="0" align="absbottom">选择文章内容中的图片</a>
<a onclick="uploadTitlepic(this);" title="上传一张图片" href="javascript:void(0);"><img src="../data/images/upload.png" border="0" align="absbottom">上传一张图片</a>
<img src="../data/images/help.png" border="0" align="absbottom" title="上传的图片需要裁剪，因为上传之后保存在临时目录中">
<div id="divTitlepicCtnr"></div>
<div id="divTitlepicCutBox"></div>为了查看方便这里做了格式化，加了换行，实际使用时如果有换行的话可能导致显示的内容出现换行，不在一行上显示。
4、添加 titlepic.css 样式文件
#divTitlepicCtnr {
width: 80%; height: 150px; overflow: scroll; border: 2px solid #4FB4DE; padding: 5px; border-radius: 5px; display:none; position: absolute; background-color: #f6f6f6;
}
#divTitlepicCtnr img {
border: 1px solid #aaa;
width:220px;
max-height:160px;
margin: 5px;
cursor: pointer;
}
#divTitlepicCutBox {
width: 200px; height: 115px; overflow: visible; border: 2px solid #4FB4DE; padding: 0px; display:none; position: absolute; z-index:8; background-color: #f6f6f6;
}5、添加 titlepic.js 脚本文件，实现“selectTitlepic”方法，以及截图功能
//selectTitlepic
function selectTitlepic(img){
var div = document.getElementById("divTitlepicCutBox");
if (div){
div.style.display = "none";
}
var me = UE.getEditor('newstext');
var catcherLocalDomain = me.getOpt('catcherLocalDomain'),
catcherActionUrl = me.getActionUrl(me.getOpt('catcherActionName')),
catcherUrlPrefix = me.getOpt('catcherUrlPrefix'),
catcherFieldName = me.getOpt('catcherFieldName');
var remoteImages = [],
imgs = me.document.getElementsByTagName("img"),
test = function (src, urls) {
if (src.indexOf(location.host) != -1 || /(^\.)|(^\/)/.test(src)) {
return true;
}
if (urls) {
for (var j = 0, url; url = urls[j++];) {
if (src.indexOf(url) !== -1) {
return true;
}
}
}
return false;
};
for (var i = 0, ci; ci = imgs[i++];) {
if (ci.getAttribute("word_img")) {
continue;
}
var src = ci.getAttribute("_src") || ci.src || "";
if (!/^(https?|ftp):/i.test(src) && test(src, catcherLocalDomain)) {
remoteImages.push(src);
}
}
if (remoteImages.length) {
var div = document.getElementById("divTitlepicCtnr");
if (div == null){
div = document.createElement("div");
div.id = "divTitlepicCtnr";
img.append(div);
}else{
div.innerHTML = "";
}
for (var i = 0, ci; ci = remoteImages[i++];) {
var image = document.createElement("img");
image.src = ci;
image.setAttribute("data-src", ci);
//image.onclick = inputTitlepic;
image.addEventListener("click",inputTitlepic);
div.append(image);
}
div.style.display = "block";
}
}
function getSafeBase64(str){
var b64str = Base64.encode(str);
//把斜杠“/”替换为减号“-”，加号“+”无需替换
return b64str.replace(/\//ig, "-").replace(/\+/ig, "_");
}
function getTitle(len){
var title = $("#title").val();
var text=title.replace(/[^\x00-\xff]/g,"aa");
if (len < 1 || text.length <= len){
return getSafeBase64(title);
}
var tmpstr = "";
var lenstr = 0;
var halflen = (len - len % 2) / 2;
for (var i = 0; i < title.length; i++){
var c = title.charCodeAt(i);
tmpstr += title.charAt(i);
//单字节加1
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
lenstr++;
}
else {
lenstr+=2;
}
if (lenstr >= halflen + len % 2){
break;
}
}
if (lenstr >= len){
return getSafeBase64(tmpstr);
}
halflen = len - lenstr;
lenstr = 0;
var tmpstr2 = "";
for (var i = title.length - 1; i > -1; i--){
var c = title.charCodeAt(i);
tmpstr2 = title.charAt(i) + tmpstr2;
//单字节加1
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
lenstr++;
}
else {
lenstr+=2;
}
if (lenstr >= halflen){
break;
}
}
return getSafeBase64(tmpstr + tmpstr2);
}
function inputTitlepic(evt){
var ipt = document.getElementById("titlepic");
if (ipt && evt){
ipt.value = evt.srcElement.getAttribute("src");
}
var div = document.getElementById("divTitlepicCtnr");
if (div){
div.style.display = "none";
}
div = document.getElementById("divTitlepicCutBox");
if (div){
div.style.display = "block";
var croppicContainerPreloadOptions = {
//uploadUrl:'/e/extend/croppic/img_save_to_file.php',
cropUrl:'/e/extend/croppic/img_crop_to_file.php',
cropData:{
"title":getTitle(30)
},
loadPicture:ipt.value,
enableMousescroll:true,
doubleZoomControls:false,
imgEyecandy:true,
imgEyecandyOpacity:0.5,
smallControls:true,
loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
onImgDrag: function(){ console.log('onImgDrag') },
onImgZoom: function(){ console.log('onImgZoom') },
onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
onAfterImgCrop:function(rep){
var ipt = document.getElementById("titlepic");
if (ipt){
ipt.value = rep.url;
}
},
onReset:function(){ $("#divTitlepicCutBox").hide(); this.destroy();},
onError:function(errormessage){ console.log('onError:'+errormessage) }
}
var cropContainerPreload = new Croppic('divTitlepicCutBox', croppicContainerPreloadOptions);
}
}
function uploadTitlepic(){
var div = document.getElementById("divTitlepicCtnr");
if (div){
div.style.display = "none";
}
div = document.getElementById("divTitlepicCutBox");
if (div){
div.style.display = "block";
var croppicContainerPreloadOptions = {
uploadUrl:'/e/extend/croppic/img_save_to_file.php',
cropUrl:'/e/extend/croppic/img_crop_to_file.php',
cropData:{
"title":getTitle(30)
},
//loadPicture:ipt.value,
enableMousescroll:true,
doubleZoomControls:false,
imgEyecandy:true,
imgEyecandyOpacity:0.5,
smallControls:true,
loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
onImgDrag: function(){ console.log('onImgDrag') },
onImgZoom: function(){ console.log('onImgZoom') },
onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
onAfterImgCrop:function(rep){
var ipt = document.getElementById("titlepic");
if (ipt){
ipt.value = rep.url;
}
},
onReset:function(){ $("#divTitlepicCutBox").hide(); this.destroy();},
onError:function(errormessage){ console.log('onError:'+errormessage) }
}
var cropContainerPreload = new Croppic('divTitlepicCutBox', croppicContainerPreloadOptions);
}
}6、上传在线图片裁剪插件croppic相关文件。
croppic插件的使用演示及相关文件下载，参考：简单功能强大的jQuery在线图片裁剪插件croppi
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/EmpireCMS/2020-05-07/428.html
