东方星雨

简单网络

一个爱好网络的80后男站长。

关注我东方星雨个人微信号：476847113

您现在的位置是：首页 > 站长日志

帝国CMS 整合在线图片裁剪插件croppic实现标题图片、文章封面裁剪功能

2020-05-07 站长 站长日志

在线 图片 帝国 封面

标题图片、文章封面实现了选择文章内容中的图片功能，但是通常文章中的图片都比较大，不做裁剪的话直接拿来做缩略图会导致列表页面加载速度变慢，所以整合了在线图片裁剪插件croppic实现标题图片、文章封面裁剪的功能。

效果如下：

1588065183954649.png

实现上要在“选择文章内容中的图片功能”的基础上，添加代码。

1、进入后台管理系统-》系统》数据表与系统模型》管理数据表，根据你使用的数据表，选择对应的管理字段

image.png

2、找到标题图片字段，点击修改系统字段

image.png

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

上一篇：帝国cms 您的用户名、密码或安全答案有误，也可能您的帐号已被禁用

下一篇：帝国CMS 标题图片、文章封面实现选择文章内容中的图片功能

相关文章

文章评论