帮助教程

    主页>帮助教程>CMS建站系统>Dedecms织梦

    • dede织梦缩略图裁剪功能优化imagecut去黑色背景

    最近更新时间：2020-03-16 01:38:52 313

    织梦裁剪功能一直不好用，首先裁剪框大小是固定的，而不是根据系统设置来自动变化。

    优化后：

    左侧图片宽度=系统设置缩略图默认宽度

    左侧裁剪结果图宽度=系统设置缩略图默认宽度  原先因为设置的是400，超出400的会黑色背景填充

    裁剪精确，不会存在黑色边框

    image.png

    下面直接说下优化方案：

    1、后台目录\templets\imagecut.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $cfg_soft_lang; ?>">
<title>图片裁剪 Image Cropper</title>
<script>var targetname = '<?php echo $f;?>';</script>
<script type="text/javascript" src="../images/js/j.js"></script>
<script src="../images/js/ui.core.js"></script>
<script src="../images/js/ui.draggable.js"></script>
<script  src="../images/js/ui.resizable.js"></script>
<style type="text/css">
body {padding:10px 0;margin:0;background:#333;font-size:12px;line-height:14px;}
form,ul,ol,h1,h2,h3,h4,h5,h6,p {margin:0;padding:0;}
input,textarea,select,button {font-size:12px;}
img {border:none;}
em {font-style:normal;}
cite,small,address {font-size:12px;font-style:normal;color:#999;}
a {color:#00f;text-decoration:underline;}
#box { padding:10px;margin:10px 20px 10px 20px;background:#f6f8f9;font-size:14px; }
/*演示内容*/
#imgBox {
	float:left;
	border:#333 3px solid;
}
#imgCut {
	position:absolute;
	top:32px;
	left:33px!important;
	background:rgba(255,255,255,.5);;
	cursor:move;
}
#faceImg {
	width:<?php echo $cfg_ddimg_width; ?>px;
}
#imgBox_pre {
	float:left;
	width:250px;
	margin-left:30px;
}
#imgBox_pre strong{
	display:block;font-size:12px;text-align:center;
}
#imgBox_pre button{
	margin:0 auto;
	display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #0092ff;
    color: #fff!important;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}
#imgBox_pre button:hover{ opacity: .9;}
#imgBox_pre div {
	width:180px;
	margin:5px auto 20px;
	border:#666 5px solid;
	overflow:hidden;
}
#data {
	clear:both;padding-top:20px;
}
#dobutton {
	clear:both; margin-top:8px;
}
</style>
<script language="javascript">
var scale2, scale3, imgH, imgW, imgsrc, scale, temp_top, temp_left;
var sysW = <?php echo $cfg_ddimg_width; ?>;
var sysH = <?php echo $cfg_ddimg_height; ?>;
<?php
$info = '';
$sizes = getimagesize($cfg_basedir.$file, $info);
$imgw = $sizes[0];
$imgh = $sizes[1];
echo "  trueImgW = $imgw;\r\n  trueImgH = $imgh;\r\n";
?>
var $ = jQuery;
$(function () {
    $("#imgCut").width(sysW).height(sysH);

    scale3 = sysW / sysH;
    scale2 = $("#imgBox_pre div").width() / $("#imgCut").width();
    $("#faceImg_pre").width($("#faceImg").width() * scale2).height($("#faceImg").height() * scale2);
    $("#imgBox_pre div").height($("#imgBox_pre div").width() / scale3);
    $("#width").val(sysW);
    $("#height").val(sysH);

    $("#imgCut").draggable({
            containment : $("#faceImg"),
            drag : function () {

                scale3 = $("#imgCut").width() / $("#imgCut").height();
                scale2 = $("#imgBox_pre div").width() / $("#imgCut").width();
                $("#faceImg_pre").width($("#faceImg").width() * scale2).height($("#faceImg").height() * scale2);
                $("#imgBox_pre div").height($("#imgBox_pre div").width() / scale3);
                $("#width").val($("#imgCut").width());
                $("#height").val($("#imgCut").height());

                temp_top = $(this).offset().top - $("#faceImg").offset().top;
                temp_left = $(this).offset().left - $("#faceImg").offset().left;

                $("#imgBox_pre div").scrollTop(temp_top * scale2);
                $("#imgBox_pre div").scrollLeft(temp_left * scale2);

                $("#left").val(temp_left);
                $("#top").val(temp_top);
            },
            stop : function () {
            }
        });

});

function changeRang()
{
	$("#imgCut").resizable({
		containment : $("#faceImg"),
		handles : "all",
		knobHandles : true,
		aspectRatio : false,
		minWidth : 90,
		minHeight : 60,
		resize : function () {

			scale3 = $("#imgCut").width() / $("#imgCut").height();
			scale2 = $("#imgBox_pre div").width() / $("#imgCut").width();
			$("#faceImg_pre").width($("#faceImg").width() * scale2).height($("#faceImg").height() * scale2);
			$("#imgBox_pre div").height($("#imgBox_pre div").width() / scale3);
			$("#width").val($("#imgCut").width());
			$("#height").val($("#imgCut").height());

			temp_top = $(this).offset().top - $("#faceImg").offset().top;
			temp_left = $(this).offset().left - $("#faceImg").offset().left;

			$("#imgBox_pre div").scrollTop(temp_top * scale2);
			$("#imgBox_pre div").scrollLeft(temp_left * scale2);

			$("#left").val(temp_left);
			$("#top").val(temp_top);
		},
		stop : function (e, ui) {
		}
	});
}
function ReturnImg(reimg)
{
	<?php
	if( empty($isupload) )
	{
		$reObjJs = "		var backObj = window.opener.document.form1.picname;
		var prvObj = window.opener.document.getElementById('divpicview');\r\n";
	}
	else
	{
		$reObjJs = "		var backObj = window.opener.parent.document.form1.picname;
		var prvObj = window.opener.parent.document.getElementById('divpicview');\r\n";
	}
	echo $reObjJs;
	?>
	backObj.value = reimg;
	if(prvObj)
	{
		prvObj.style.width = '150px';
		prvObj.innerHTML = "<img src='"+reimg+"?n' width='150' />";
	}
	if(document.all) {
		window.opener=true;
	}
	window.close();
}
</script>
<link rel="shortcut icon" href="../wangsir/admin/favicon.ico" >
<meta name="generator" content="网先生" />
<meta name="author" content="Wangsir.cn|做网站，找网先生" />
<meta name="网站建设服务商" content="您想做一个这样的网站吗？联系QQ915688610|网先生(www.wangsir.cn)|壹网(www.0001w.com)">
</head>
<body>
<div id="box">
	<form id="setFace" name="setFace" method="post" action="imagecut.php">
	<input type="hidden" name="action" value="cut" />
	<input type="hidden" name="f" value="<?php echo $f;?>" />
	<input type="hidden" name="file" value="<?php echo $file;?>" />
	<input type="hidden" name="isupload" value="<?php echo (empty($isupload) ? '' : $isupload); ?>" />
   <div id="imgBox">
    	<img id="faceImg" src="<?php echo $file;?>" />
    	<div id="imgCut"></div>
   </div>
   <div>
   		<div id="imgBox_pre">
   		<strong>预览</strong>
   		<div class='boximg'><img id="faceImg_pre" src="<?php echo $file;?>" /></div>
   		<p align="center">
   			<button type="submit" name="sb1" id="sb1" title="裁剪前务必拖动左侧裁剪框，不拖动可能裁剪结果为黑色图片">裁剪</button> &nbsp;
   			<button type="button" name="useold" onClick="ReturnImg('<?php echo $file; ?>')">不裁剪,返回</button>
   		</p>
	 </div>
   <div id="data" style='color:#ffffff'>
    left<input name="left" type="text" id="left" size="3" readonly="readonly" />
    top<input name="top" type="text" id="top" size="3" readonly="readonly" />
    宽<input name="width" type="text" id="width" size="3" readonly="readonly" />
    高<input name="height" type="text" id="height" size="3" readonly="readonly" />
  	<a href='javascript:changeRang();' id='changeRang'><u>改变比例</u></a>
    </div>
  </form>
</div>
<div style="display:none;">本模板由[网先生]制作，购买正版请访问[www.wangsir.cn]，永久客服[QQ915688610]</div>
</body>
</html>

    2、后台目录\imagecut.php

    <?php
/**
 * 截取图片
 *
 * @version        $Id: imagecut.php 1 11:06 2010年7月13日Z tianya $
 * @package        DedeCMS.Administrator
 * @copyright      Copyright (c) 2007 - 2010, DesDev, Inc.
 * @license        http://help.dedecms.com/usersguide/license.html
 * @link           http://www.dedecms.com
 */
require_once(dirname(__FILE__).'/config.php');
$action = isset($action) ? trim($action) : '';
if(empty($action))
{
    if(!@is_file($cfg_basedir.$file))
    {
        ShowMsg("对不起，必须选择站内的图片才能进行裁剪！<br />点击'<a href='/include/dialog/select_images.php?f=form1.picname&imgstick=small'>站内选择</a>', 上传或选择一个图片，然后才能进行裁剪！", "../include/dialog/select_images.php?f=form1.picname&imgstick=small", 0 , 10000);
        exit();
    }
    include DEDEADMIN.'/templets/imagecut.htm';
    exit();
}
elseif($action == 'cut')
{
    require_once(DEDEINC.'/image.func.php');

    if(!@is_file($cfg_basedir.$file))
    {
        ShowMsg('对不起，请重新选择裁剪图片！', '-1');
        exit();
    }
    if(empty($width))
    {
        ShowMsg('对不起，请选择裁剪图片的尺寸！', '-1');
        exit();
    }
    if(empty($height))
    {
        ShowMsg('对不起，请选择裁剪图片的尺寸！', '-1');
        exit();
    }
    $imginfo = getimagesize($cfg_basedir.$file);
    $imgw = $imginfo[0];
    $imgh = $imginfo[1];
    $temp = $cfg_ddimg_width/$imgw;  //wangsir.cn 网先生 缩略图裁剪功能优化  2020-3-16
    $newwidth = $cfg_ddimg_width;    //wangsir.cn 网先生 缩略图裁剪功能优化  2020-3-16
    $newheight = $imgh * $temp;
    $srcFile = $cfg_basedir.$file;
    $thumb = imagecreatetruecolor($newwidth, $newheight);
    $thumba = imagecreatetruecolor($width, $height);

    switch($imginfo['mime'])
    {
        case 'image/jpeg':
            $source = imagecreatefromjpeg($srcFile);
            break;
        case 'image/gif':
            $source = imagecreatefromgif($srcFile);
            break;
        case 'image/png':
            $source = imagecreatefrompng($srcFile);
            break;
        default:
            ShowMsg('对不起，裁剪图片类型不支持请选择其他类型图片！', '-1');
            break;
    }

    imagecopyresized($thumb, $source, 0, 0, 0, 0 , $newwidth, $newheight, $imgw, $imgh);
    imagecopy($thumba, $thumb, 0, 0, $left, $top, $newwidth, $newheight);

    $ddn = substr($srcFile, -3);
    
    $ddpicok = $reObjJs = '';
    if( empty($isupload) )
    {
        $ddpicok = preg_replace("#\.".$ddn."$#", '-lp.'.$ddn, $file);
        $reObjJs = "        var backObj = window.opener.document.form1.picname;
        var prvObj = window.opener.document.getElementById('divpicview');\r\n";
    }
    else
    {
        $ddpicok = $file;
        $reObjJs = "        var backObj = window.opener.parent.document.form1.picname;
        var prvObj = window.opener.parent.document.getElementById('divpicview');\r\n";
    }
    
    $ddpicokurl = $cfg_basedir.$ddpicok;

    switch($imginfo['mime'])
    {
        case 'image/jpeg':
            imagejpeg($thumba, $ddpicokurl, 85);
            break;
        case 'image/gif':
            imagegif($thumba, $ddpicokurl);
            break;
        case 'image/png':
            imagepng($thumba, $ddpicokurl);
            break;
        default:
            ShowMsg("对不起，裁剪图片类型不支持请选择其他类型图片！", "-1");
            break;
    }
    
    //对任意裁剪方式再次缩小图片至限定大小
    if($newwidth > $cfg_ddimg_width || $newheight > $cfg_ddimg_height)
    {
        ImageResize($ddpicokurl, $cfg_ddimg_width, $cfg_ddimg_height);
    }
    
    //如果从其它图中剪出， 保存附件信息
    if( empty($isupload) )
    {
         $inquery = "INSERT INTO `dede_uploads`(title,url,mediatype,width,height,playtime,filesize,uptime,mid)
        VALUES ('$ddpicok','$ddpicok','1','0','0','0','".filesize($ddpicokurl)."','".time()."','".$cuserLogin->getUserID()."'); ";
         $dsql->ExecuteNoneQuery($inquery);
         $fid = $dsql->GetLastID();
         AddMyAddon($fid, $ddpicok);
    }
    
?>
<SCRIPT language=JavaScript>
function ReturnImg(reimg)
{
    <?php echo $reObjJs; ?>
    backObj.value = reimg;
    if(prvObj)
    {
        prvObj.style.width = '150px';
        prvObj.innerHTML = "<img src='"+reimg+"?n' width='150' />";
    }
    if(document.all) {
        window.opener=true;
    }
    window.close();
}
ReturnImg("<?php echo $ddpicok; ?>");
</SCRIPT>
<?php
}
?>



    以上内容是否对您有帮助？

    • 相关的其它问题：

    discuz手机触屏版上传图片缩略图大小调整宽高自适应
    dede文档关键词维护功能无效，5.7SP2版本文档关键词内链修复
    修复dede系统问题：系统参数-变量值若包含单引号''前台会过滤输出隐藏
    DedeCMS友情连接flink格式自定义输出链接和网站名称LOGO
    Discuz手机版的帖子详情缩略图140宽度过小
    dede织梦栏目列表封面标题连接符/间隔符斜杠和>去除一二三级顺序修改
    dede批量修改数据表前缀导致文档读取附加信息出错!
    dede自定义表单留言为空验证判断必填项防止恶意提交
    dede织梦软件摘要信息修改cfg_softname cfg_soft_enname cfg_soft_devteam cfg_version
    Close