PHP+Ajax+Js+artdialog 实现模态框下图片旋转

最近做一个项目要实现图片的翻转及保存,一下是我用PHP gd库操作翻转,ajax传值并返回新生成的图片,并用artdialog  实现弹出窗(模态框)里面用到iframe

代码如下

html代码:

<form id="view-index-form" class="view-index-form" method="post" action=""
      enctype="multipart/form-data">
    <tr style="height: 500px;">
        <td class="search">
        <td class="td_div">
            <div class="title">
                会员等级:
                <?php foreach ($model['type'] as $s) {
                    if ($s['id'] == $v['level_id']) echo $s['name'];
                } ?>
                绿色通道服务:0次/0次 患儿身份证号: <?php echo $v['child_card'] ?>
            </div>
            <div class="medical">
                <ul>
                    <li>会员手机:<?php echo $v['umobile'] ?></li>
                    <li>就诊卡:<a href="#"><?php echo $v['card_num'] ?></a></li>
                    <li>就诊卡类型:非医保就诊卡</li>
                    <li>医保号:<?php echo $v['yb_num'] ?></li>
                    <li>患儿姓名:<?php echo $v['child_name'] ?></li>
                    <li>患儿身份证:<?php echo $v['child_card'] ?></li>
                    <li>监护人姓名:<?php echo $v['user_name'] ?></li>
                    <li>监护人身份证:<?php echo $v['user_card'] ?></li>
                </ul>
            </div>
            <div class="check_content">
                <div class="cards">
                    <p class="p_text">监护人身份证:</p>
                    <div class="p_img">
                       <img  id="zoom_01" class="masks" src='<?php echo $this->root_dir . $v['pic'] ?>'/>
                        <img   class="reversal" style="display: none" src='<?php echo $this->root_dir . $v['pic'] ?>'/>
                    </div>
                    <div class="sps">
                        <?php
                        if (empty($v['pic'])) {
                            ?><img
                            src="<?php echo $this->root_dir . '/static/common/images/not_upload.png' ?>"
                            alt=""><span>未上传</span>
                        <?php } elseif ($v['flag'] === '1') {
                            ?><img
                            src="<?php echo $this->root_dir . '/static/common/images/dsh.png' ?>"
                            alt=""> <span>待审核</span>
                        <?php } elseif ($v['flag'] === '2') {
                            ?><img
                            src="<?php echo $this->root_dir . '/static/common/images/ytg.png' ?>"
                            alt=""> <span>审核通过</span>
                        <?php } elseif ($v['flag'] === '-1') {
                            ?><img
                            src="<?php echo $this->root_dir . '/static/common/images/ybh.png' ?>"
                            alt=""> <span>已驳回</span>
                        <?php } ?>
                    </div>
                </div>
                <div class="cards_num">
                    <input name="userid" type="hidden" value="<?php echo $v['uid'] ?>"/>
                    <!--_csrf隐藏域表单-->
                    <input type="hidden" name="flag4" value="<?php echo $v['flag'] ?>">
                    <input type="hidden" id="_csrf" name="_csrf"
                           value="<?php echo Yii::$app->request->csrfToken; ?>">
                    证件证号: <input style="margin-left: 10px;" class="input-text"
                                 value="<?php if (isset($v['card_num'])) echo $v['card_num'] ?>"
                                 name="card_num"
                                 id="card_num" readonly="true" style="width:150px;readOnly=true;"/>
                    <span class="view-index-batch"> 
               <input id="submit_search" name="submit_search"  class="btn-button confirmSubmit approved"  style="margin-left:20px; cursor:pointer; readOnly=true;"  type="button" value="通过审核"/> </span><br/>

                    <div class="reject_div"><span class="sp">驳回原因:</span> 
                          <textarea id="text_area" name="reason4" class="test text_area" style="margin: 10px;" rows="8" cols="40"><?php echo $v['reason'] ?></textarea>
                    </div>
                    <select name="reject" id="reject"
                            style="margin-left:10px;width: 250px; height: 30px;">
                        <option value="">---请选择驳回原因---</option>
                        <?php foreach ($model['reject'] as $v) { ?>
                            <option
                                value=" <?php echo $v['id'] ?>"> <?php echo $v['text'] ?></option>
                        <?php } ?>
                    </select>
                    <button class="ui-btn ui-btn-primary mb-10 buts reject_submit"
                            style="margin-left:10px;width:80px;" type="button">驳回
                    </button>
                </div>
            </div>
        </td>
        </td>
    </tr>
</form>

js代码:

<script type="text/javascript">
    /**
     *
     * 动态处理图片大小
     * */
    $(function(){
        var width =$('.masks').width();    // 图片实际宽度
        var height =$('.masks').height();  // 图片实际高度
        if(width>height){
            $('.masks').css("width",width/5);
            $('.masks').css("height",height/5);
        }else{
            $('.masks').css("width",width/5);
            $('.masks').css("height",height/5);
        }
    })
    /**
     *
     * 弹出遮罩
     * */
    $(function () {
         num = 0;
         one = 0;
        $('.masks').live('click', function () {
            var imgss = $(this).attr('src');
            var imgss_width =  $('.reversal').width();
            var imgss_height =  $('.reversal').height();
            var masks = top.art.dialog({
                title: '',
                lock: true,
                background: '#000', //背景色
                opacity: 0.87, // 透明度
                content: '<img class="imagessss" src="' + imgss + '" width="'+imgss_width/2+'" height="'+imgss_height/2+'"/>',//加载html元素
                button: [{
                    name: '旋转',
                    callback: function () {
                        rote(imgss);
                        return false;
                    },
                    focus: true
                },
                    {
                        name: '确定',
                        callback: function () {
                            //      获取模态框中的图片路径及宽度、长度
                            var pimgs =  parent.$('.aui_main .aui_content .imagessss').attr('src');
                            var pimgs_width =parent.$('.aui_main .aui_content .imagessss').width();
                            var pimgs_height =parent.$('.aui_main .aui_content .imagessss').height();
                            //      动态改变$('.masks')元素的图片路径及宽度、长度
                            $('.masks').attr('src',pimgs);
                            $('.masks').css("width",pimgs_width/3);
                            $('.masks').css("height",pimgs_height/3);
                            $('.masks').prop('data-zoom-image', pimgs);
                        },
                        focus: true
                    }],

                cancel: true
            });
            masks.show();
        })
        /**
         *
         * 封装旋转函数
         * */
        function rote(imgss){
            var csrfToken = $('input[name="_csrf"]').attr("value");
            var urls = "<?php echo $this->createUrl('member/correct') ?>";
            var uids = $("input[name='userid']").val();
            var imgsss =  $('.reversal').attr('src');
            var imgsss_width =  $('.reversal').width();
            var imgsss_height =  $('.reversal').height();
            num = num + 90;
            if (num == '360') {
                num = 0;
            }
            one =one +1;
            $.ajax({
                url: urls,
                data: {uid: uids, num: num, img: imgsss,one :one,_csrf: csrfToken},
                type: 'post',
                dataType: 'html',
                success: function (data) {
                    if (data) {
                        parent.$('.aui_main .aui_content .imagessss').attr('src', data);
                        $('.reversal').attr('src', data);
                        parent.$('.aui_main .aui_content .imagessss').css("width",imgsss_height/2);
                        parent.$('.aui_main .aui_content .imagessss').css("height",imgsss_width/2);
                        return false;
                    }
                }
            });
        }
    })
     /**
      *
      * 模态框查看图片
      * */
    $(function(){
        $('.kan_check').live('click',function(){
            var  up_check =$(this).parent().find('.up_check').attr('src');
            var up_check_width =$(this).parent().find('.up_check').width();
            var up_check_height =$(this).parent().find('.up_check').height();
            var ma = top.art.dialog({
                title: '',
                lock: true,
                background: '#000', //背景色
                opacity: 0.87, // 透明度
                content: '<img class="imagessss" src="' + up_check + '" width="'+up_check_width/2+'" height="'+up_check_height/2+'"/>',
                button: [{
                    name: '关闭',
                    callback: function () {

                    },
                    focus: true
                }],
            });
            ma.show();
        })
    })
</script>

PHP代码:

控制器:
    public function actionCorrect(){
        if (Yii::$app->request->isAjax){
            $data = Yii::$app->request->post();
            echo Img::rotation($data);
        }
    }

models:
img类

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2015/8/14
 * Time: 17:28
 * 图片旋转
 */
namespace common\models;

use Yii;
use yii\helpers\Url;
use \base\BaseActiveRecord;
class Img extends  BaseActiveRecord{
    public static function imageInfo($image){
     //   判断$image是否为空,为空直接返回false
        if(empty($image)){
            return false;
        }
      //   获取图片信息
        $imgInfo = getimagesize($image);
      //    如果$imgInfo为空直接返回false
        if(empty($imgInfo)){
            return false;
        }
        $img =[];
        $img['width']=$imgInfo[0];
        $img['height']=$imgInfo[1];
        $img['extype']=substr($imgInfo['mime'],strrpos($imgInfo['mime'],'/')+1);
      //    返回图片信息
        return $img;
    }

    public static function rotation($data){
        if(empty($data['img'])){
            return false;
        }
         //   拼接图片路径
          $path = Url::RootUrl().$data['img'];
          if($data['one'] == '1'){
              $poss = strrpos($path,'/');
              $npath = substr($path,0,$poss+1);
              $exty = substr($path,strpos($path,'.'));
              $paths =$npath.$data['uid'].time().$exty;
              if(copy($path,$paths)){
                  $path =$paths;
              };
          }
          // 获取图片信息
          $imginfo =self::imageInfo($path);
          //  判断图片类型(依类型打开imageCreateFromGif、imagecreatefromjpeg)
          $creteimage ='imagecreatefrom'.$imginfo['extype'];

          //保存图片格式
          $saveimage ='image'.$imginfo['extype'];
          if($imginfo['extype'] == 'jpeg'){
              $temp = substr($path,0,strrpos($path, '.')).'.jpg';
              rename($path,$temp);
              $path =$temp;
          }
         //  打开图片资源
         $im =$creteimage($path);
         //  填充颜色
         $color =imagecolorallocate($im,255,255,255);
         //  旋转图片
        switch($data['num']){
            case 0:
                $imgs =imagerotate($im,90,$color);
                break;
            case 90:
                $imgs =imagerotate($im,90,$color);
                break;
            case 180:
                $imgs =imagerotate($im,90,$color);
                break;
            case 270:
                $imgs =imagerotate($im,90,$color);
                break;
            case 360:
                $imgs =imagerotate($im,90,$color);
                break;
        }
        $en = strrpos($path, '/');
        $new = substr($path,0,$en+1).time().$data['uid'];
        $newPath = $new.'.'.$imginfo['extype'];
        //  保存图片
        $true = $saveimage($imgs,$newPath);
        $str =  strrpos($data['img'], '.');
        $extype = substr($data['img'],$str+1);
        if($imginfo['extype'] == 'jpeg'){
            $tmps =$new.'.jpg';
            rename($newPath,$tmps);
            $newPath =$tmps;
        }
        $str = strrpos($newPath, '/uploads');
        $en = strrpos($newPath, '.');
        $end =$en-$str;
        //  echo substr($newPath,$str,$end);die;
        if($extype =='jpg'){
            $res = '/bch_backend'.substr($newPath,$str,$end).'.jpg';
        }else{
            $res = '/bch_backend'.substr($newPath,0,strrpos($newPath, '.')).$extype;
        }
            unlink($path);
        if(!empty($true)){
            return $res;
        }else{
           return '0';
        }
    }
}

PHP+Ajax+Js+artdialog 实现模态框下图片旋转 - 無名小站
0 Comments
Leave a Reply