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

微wx笑 2020-05-07【帝国CMS】246 6 0关键字：

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

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

效果如下：TE1无知

TE1无知

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

TE1无知

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

TE1无知

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

TE1无知

3、在“输入表单替换html代码”输入框中替换为以下代码：TE1无知

<?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>

为了查看方便这里做了格式化，加了换行，实际使用时如果有换行的话可能导致显示的内容出现换行，不在一行上显示。
TE1无知

4、添加 titlepic.css 样式文件TE1无知

#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”方法，以及截图功能
TE1无知

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

//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);
  }
}