前端文件代码：
 ```js
 <!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<style>
.dashed-box {position: absolute;z-index: 9997; border: 1px dashed red; width: 0px; height: 0px;left: 0px; top: 0px; overflow: hidden;}
#moving_box {background-color: #0A90DB;}
.question-box {
    position: absolute;
    z-index: 9998;
    /*background: red;*/
    /* older safari/Chrome browsers */
    -webkit-opacity: 0.8;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 0.8;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 0.8;
    /* IE9 + etc...modern browsers */
    opacity: .8;
    /* IE 4-9 */
    filter: alpha(opacity=80);
    /*This works in IE 8 & 9 too*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /*IE4-IE9*/
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
.question-border {z-index: 9999;border: 2px dashed red;overflow: hidden; }
</style>
<body>
<button id="btn">点击上传图片</button>
<br/>
<img id="img2" src="" style="max-width:100%">

</body>
</html>
<script language="javascript">
    function isMobile() {
      var userAgentInfo = navigator.userAgent;

var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];

var mobile_flag = false;

//根据userAgent判断是否是手机
      for (var v = 0; v < mobileAgents.length; v++) {
          if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
              mobile_flag = true;
              break;
          }
      }
      var screen_width = window.screen.width;
      var screen_height = window.screen.height;

//根据屏幕分辨率判断是否是手机
      if(screen_width < 500 && screen_height < 800){
          mobile_flag = true;
      }

return mobile_flag;
    }

if (!isMobile()) {
          // PC
          //鼠标点击
          boxObj.onmousedown = function(e) {
            flag = true;
            var e = window.event || e;
            target = e.target || e.srcElement; //获取document 对象的引用
            //e.pageY，e.pageX兼容
            if(target.src) {
              stopDefault(e)
            }
            var scrollTop = boxObj.scrollTop;
            var scrollLeft = boxObj.scrollLeft;
            var ePageX = e.clientX + scrollLeft;
            var ePageY = e.clientY + scrollTop;
            //按下时鼠标距离页面的距离
            startX = ePageX;
            startY = ePageY;
            //按下时鼠标距离的左边和上边的距离
            startL = startX - referenceSize.pos.left;
            startT = startY - referenceSize.pos.top;
            index++;
            // 如果鼠标在 box 上被按下
            if(target.className.match(/del-box/i)) {
              // 允许拖动
              flag = false;
              // 设置当前 box 的 id 为 moving_box
              var movingBox = document.getElementById("moving_box")
              if(movingBox !== null) {
                movingBox.removeAttribute("id");
              }
              target.id = "moving_box";
              removeBox(target);
            } else {
              // 先删除之前的div
              $('#confirmingAppraisal .question-box').remove();
              var div = document.createElement("div");
              div.id = wId + index;
              div.className = "dashed-box";
              boxObj.appendChild(div);
              div = null;
            }
          }
          //鼠标离开
          boxObj.onmouseup = function(e) {
            var e = window.event || e;
            if(boxWidth >= 1 || boxHeight >= 1) {
              boxObj.removeChild(dragBox(wId + index));
              index++;
              var div = document.createElement("div");
              var spanObj = document.createElement("span");
              spanObj.className = 'del-box';
              div.appendChild(spanObj);
              div.className = "question-box question-border";
              div.style.left = newMarkPos.left + "px";
              div.style.top = newMarkPos.top + "px";
              div.style.width = boxWidth + "px";
              div.style.height = boxHeight + "px";
              boxObj.appendChild(div);
              div = null;
              boxWidth = 0;
              boxHeight = 0;
            } else {
              if(flag) {
                boxObj.removeChild(dragBox(wId + index));
              }
            }
            flag = false;
          }
          //鼠标移动
          boxObj.onmousemove = function(e) {
            var e = window.event || e;
            stopDefault(e)
            if(flag) {
              var scrollTop = boxObj.scrollTop;
              var scrollLeft = boxObj.scrollLeft;
              var ePX = e.clientX + scrollLeft;
              var ePY = e.clientY + scrollTop;
              var disW = ePX - startX;
              var disH = ePY - startY;
              var L = startL + disW;
              var T = startT + disH;
              if(disW > 0) {
                if(L >= 0) {
                  boxWidth = disW
                }
                newMarkPos.left = startL;
              } else {
                if(L <= 0) {
                  L = 0;
                  boxWidth = startL;
                }
                boxWidth = (startL - L);
                newMarkPos.left = L;
              }
              if(disH > 0) {
                if(T >= 0) {
                  boxHeight = disH
                }
                newMarkPos.top = startT;
              } else {
                if(T <= 0) {
                  T = 0;
                  boxHeight = startT;
                }
                boxHeight = (startT - T)
                newMarkPos.top = T;
              }
              dragBox(wId + index).style.left = newMarkPos.left + "px";
              dragBox(wId + index).style.top = newMarkPos.top + "px";
              dragBox(wId + index).style.width = Math.abs(boxWidth) + "px";
              dragBox(wId + index).style.height = Math.abs(boxHeight) + "px";
              stopDefault(e)
            }
          }
        } else {
          // Wap
          //鼠标点击
          boxObj.ontouchstart = function(e) {
            flag = true;
            var e = window.event || e;
            target = e.target || e.srcElement; //获取document 对象的引用
            //e.pageY，e.pageX兼容
            if(target.src) {
              stopDefault(e)
            }
            var scrollTop = boxObj.scrollTop;
            var scrollLeft = boxObj.scrollLeft;
            var ePageX = e.changedTouches[0].clientX + scrollLeft;
            var ePageY = e.changedTouches[0].clientY + scrollTop;
            //按下时鼠标距离页面的距离
            startX = ePageX;
            startY = ePageY;
            //按下时鼠标距离的左边和上边的距离
            startL = startX - referenceSize.pos.left;
            startT = startY - referenceSize.pos.top;
            index++;
            // 如果鼠标在 box 上被按下
            if(target.className.match(/del-box/i)) {
              // 允许拖动
              flag = false;
              // 设置当前 box 的 id 为 moving_box
              var movingBox = document.getElementById("moving_box")
              if(movingBox !== null) {
                movingBox.removeAttribute("id");
              }
              target.id = "moving_box";
              removeBox(target);
            } else {
              // 先删除之前的div
              $('#confirmingAppraisal .question-box').remove();
              var div = document.createElement("div");
              div.id = wId + index;
              div.className = "dashed-box";
              boxObj.appendChild(div);
              div = null;
            }
          }
          //鼠标离开
          boxObj.ontouchend = function(e) {
            var e = window.event || e;
            if(boxWidth >= 1 || boxHeight >= 1) {
              boxObj.removeChild(dragBox(wId + index));
              index++;
              var div = document.createElement("div");
              var spanObj = document.createElement("span");
              spanObj.className = 'del-box';
              div.appendChild(spanObj);
              div.className = "question-box question-border";
              div.style.left = newMarkPos.left + "px";
              div.style.top = newMarkPos.top + "px";
              div.style.width = boxWidth + "px";
              div.style.height = boxHeight + "px";
              boxObj.appendChild(div);
              div = null;
              boxWidth = 0;
              boxHeight = 0;
            } else {
              if(flag) {
                boxObj.removeChild(dragBox(wId + index));
              }
            }
            flag = false;
          }
          //鼠标移动
          boxObj.ontouchmove = function(e) {
            var e = window.event || e;
            stopDefault(e)
            if(flag) {
              var scrollTop = boxObj.scrollTop;
              var scrollLeft = boxObj.scrollLeft;
              var ePX = e.changedTouches[0].clientX + scrollLeft;
              var ePY = e.changedTouches[0].clientY + scrollTop;
              var disW = ePX - startX;
              var disH = ePY - startY;
              var L = startL + disW;
              var T = startT + disH;
              
              if(disW > 0) {
                if(L >= 0) {
                  boxWidth = disW
                }
                newMarkPos.left = startL;
              } else {
                if(L <= 0) {
                  L = 0;
                  boxWidth = startL;
                }
                boxWidth = (startL - L);
                newMarkPos.left = L;
              }
              if(disH > 0) {
                if(T >= 0) {
                  boxHeight = disH
                }
                newMarkPos.top = startT;
              } else {
                if(T <= 0) {
                  T = 0;
                  boxHeight = startT;
                }
                boxHeight = (startT - T)
                newMarkPos.top = T;
              }
              dragBox(wId + index).style.left = newMarkPos.left + "px";
              dragBox(wId + index).style.top = newMarkPos.top + "px";
              dragBox(wId + index).style.width = Math.abs(boxWidth) + "px";
              dragBox(wId + index).style.height = Math.abs(boxHeight) + "px";
              stopDefault(e)
            }
          }
        }

var x_width = $('#copy_img').width();
      var x_height = $('#copy_img').height();

var y_width = $('#add_img').width();
      var y_height = $('#add_img').height();

var bei  = x_width / y_width;
      var bei2 = x_height / y_height;

var width = Math.floor($('.question-box').width()*bei);
      var height = Math.floor($('.question-box').height()*bei2);
      
      var shang = Math.floor(Y*bei);
      var you = Math.floor(X*bei2);
      var xia = shang+width;
      var zuo = you+height;
    } else {
      var shang = 0;
      var you = 0;
      var xia = 0;
      var zuo = 0;
    }

// 获得四大参数
    console.log(shang);
    console.log(you);
    console.log(xia);
    console.log(zuo);

// 上传图片
    $.ajax({
      type: "POST",
      url: "post_img.php",
      data: {
        'x1' : shang,
        'y1' : you,
        'x2' : xia,
        'y2' : zuo,
        'base64' : $('#add_img').attr('src')
      },
      success: function(data){
        var array = eval('('+data+')');
        alert(array['msg']);
        if (array['data'].img2 != null && array['data'].img2 != '') {
          $('#img2').attr('src', array['data'].img2)
        }
        $('#img_no').click();
      }
    });
})

</script>
```

后端处理代码：
```php
<?php  
 /** 图片局部打马赛克 
* @param  String  $source 原图 
* @param  Stirng  $dest   生成的图片 
* @param  int     $x1     起点横坐标 
* @param  int     $y1     起点纵坐标 
* @param  int     $x2     终点横坐标 
* @param  int     $y2     终点纵坐标 
* @param  int     $deep   深度，数字越大越模糊 
* @return boolean 
 */  
 function imageMosaics($source, $dest, $x1, $y1, $x2, $y2, $deep){  
   
     // 判断原图是否存在  
     if(!file_exists($source)){  
         return false;  
     }  
   
     // 获取原图信息  
     list($owidth, $oheight, $otype) = getimagesize($source);  
   
     // 判断区域是否超出图片  
     if($x1>$owidth || $x1<0 || $x2>$owidth || $x2<0 || $y1>$oheight || $y1<0 || $y2>$oheight || $y2<0){  
         return false;  
     }  
   
     switch($otype){  
         case 1: $source_img = imagecreatefromgif($source); break;  
         case 2: $source_img = imagecreatefromjpeg($source); break;  
         case 3: $source_img = imagecreatefrompng($source); break;  
         default:  
             return false;  
     }  
   
     // 打马赛克  
     for($x=$x1; $x<$x2; $x=$x+$deep){  
         for($y=$y1; $y<$y2; $y=$y+$deep){  
             $color = imagecolorat($source_img, $x+round($deep/2), $y+round($deep/2));  
             imagefilledrectangle($source_img, $x, $y, $x+$deep, $y+$deep, $color);  
         }  
     }  
   
     // 生成图片  
     switch($otype){  
         case 1: imagegif($source_img, $dest); break;  
         case 2: imagejpeg($source_img, $dest); break;  
         case 3: imagepng($source_img, $dest); break;  
     }  
   
     return is_file($dest)? true : false;  
   
 }

// 用于前端输出JSON
function _json($code, $msg, $list=[]) {
    echo json_encode([
        'code' => "$code",
        'msg' => $msg,
        'data' => $list
    ], JSON_UNESCAPED_UNICODE);
    exit;
}

// 匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $_POST['base64'], $result)){
    $type = $result[2];
    $time = time();
    $new_file  = $time.'_1.'.$type;
    $new_file2 = $time.'_2.'.$type;
    
    if (!file_put_contents($new_file, base64_decode(str_replace($result[1], '', $_POST['base64'])))){
        _json('01', '上传失败');
    }
} else {
    _json('01', '上传失败');
}

// 需要打码
if ($_POST['x1'] != 0) {
    $flag = imageMosaics($new_file, $new_file2, $_POST['x1'], $_POST['y1'], $_POST['x2'], $_POST['y2'], 10);  
    if (!$flag) {
        _json('01', '图片打码失败');
    } else {
        _json('00', '打码成功', [
            'img1'=>$new_file,
            'img2'=>$new_file2,
        ]);
    }
}
_json('00', '上传成功', [
    'img1'=>$new_file,
    'img2'=>'',
]);
```

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺