帮助教程

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



    以上内容是否对您有帮助?
  • Close