nlstudio7197x: 2019

這裡要教各位怎麼上傳影像
這沒有什麼特別
還要教各位怎麼裁切檔案

另外針對需求在A網站點擊上傳到 B主機的方法
我在很多他網站看到很多奇妙又複雜的方法
我這介紹一個非常簡單的方法
又快速又簡單

首先我們拆成兩個步驟
1.第一個步驟上傳到非本地主機 B
要有一個基本觀念就是我們只是把檔案 name="my_file" 透過input路逕
將路逕中的影像直接傳給目標對像而已

因此我們可以是 action="/uploadimg" (本地呼叫)
也可以是遠端主機呼叫 action="http://domain.com/uploadimg"
把它當成API呼叫即可
如果是一般PHP 就只是改成 action="http://domain.com/uploadimg.php"
對目標php檔案進行上傳而已
實際程式碼也只有兩段非常簡單
我這邊是用 php 框架 laravel 來製作


<form method="post" enctype="multipart/form-data" action="http://domain.com/uploadimg">
  <input type="file" name="my_file">
  <input type="submit" value="Upload">
</form>


 public function index()
 {
  
  
  if ($_FILES['my_file']['error'] === UPLOAD_ERR_OK){
    echo '檔案名稱: ' . $_FILES['my_file']['name'] . '<br/>';
    echo '檔案類型: ' . $_FILES['my_file']['type'] . '<br/>';
    echo '檔案大小: ' . ($_FILES['my_file']['size'] / 1024) . ' KB<br/>';
    echo '暫存名稱: ' . $_FILES['my_file']['tmp_name'] . '<br/>';

    # 檢查檔案是否已經存在
    if (file_exists('' . $_FILES['my_file']['name'])){
   echo '檔案已存在。<br/>';
    } else {
   $file = $_FILES['my_file']['tmp_name'];
   $dest = '' . $_FILES['my_file']['name'];

   # 將檔案移至指定位置
   move_uploaded_file($file, $dest);
    }
  } else {
    echo '錯誤代碼：' . $_FILES['my_file']['error'] . '<br/>';
  }
  

 }

第二個步驟就是影像裁切
你必須到 http://odyniec.net/projects/imgareaselect 下載lib
放到你的主機裡

接著如果你的主機沒有安裝PHP影像套件 gd gd-devel php-gd 套件
請安裝


yum install gd gd-devel php-gd

底下要特別注意就是這個比例的部份
注意看我們已經把影像縮成 width="342"
但這不是原本影像解析度
根據你縮小的比例算出一個比例
要把影像長寬乘回來
$("[name=width]").val(selection.width*2.336)
$("[name=height]").val(selection.height*2.33)

html code
<link rel="stylesheet" type="text/css" href="../imgareaselect/css/imgareaselect-default.css" />
<script type="text/javascript" src="../imgareaselect/scripts/jquery.min.js"></script>
<script type="text/javascript" src="../imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>
 
<script>
$(function (){
 
    $('img#photo').imgAreaSelect({
        handles: true,
  aspectRatio : "4:3", //比例
  fadeSpeed : 200,
  maxWidth : 300,
  maxHeight : 300,
  minWidth : 100,
  minHeight: 100,
  outerOpacity : 0.9, //指定透明度
        onSelectChange: function (img, selection){
 
   //x1, y1 為左上角座標
   //x2, y2 為右下表座標
 
   $("[name=x1]").val(selection.x1)
   $("[name=y1]").val(selection.y1)
   $("[name=x2]").val(selection.x2)
   $("[name=y2]").val(selection.y2)
   $("[name=width]").val(selection.width*2.336)
   $("[name=height]").val(selection.height*2.33)
   }
 
  });
 
 })
</script>
<img id="photo" src="domo.jpg"  width="342" >
 
<form action="/imgAreaSelect" method="post" enctype="multipart/form-data">
    <input type="hidden" name="x1" value="" />
    <input type="hidden" name="y1" value="" />
    <input type="hidden" name="x2" value="" />
    <input type="hidden" name="y2" value="" />
    <input type="hidden" name="width" value="">
    <input type="hidden" name="height" value="">
    <input type="hidden" name="imgfile" value="domo.jpg">
    <input type="submit" name="submit" value="Submit" />
</form>

imgAreaSelect code
public function index()
 {
  
  $_imgfile = \Input::get("imgfile");
  $_x1  = \Input::get("x1");
  $_y1  = \Input::get("y1");
  $_width  = \Input::get("width");
  $_height = \Input::get("height");
  print_r("_width : ".$_width);
  //print_r($_imgfile);
  $newimg = $this->cutimg( $_imgfile, $_x1, $_y1, $_width, $_height );
  header("Content-Type: image/jpg");
  mb_http_output("pass");
  imagejpeg($newimg, "" . 'domo.jpg'); 
                //把影像存入路逕
  die;
 }

 public function cutimg($fromimgname, $fromimg_startx, $fromimg_starty, $newimg_width, $newimg_height)
 {
  //取得目標檔案的長寬
  $fromimg = imagecreatefromjpeg($fromimgname);
  $fromimg_info = getimagesize($fromimgname);
  $fromimg_width = $fromimg_info[0];
  $fromimg_height = $fromimg_info[1];

  //新檔案的寬高
  $newimg = imagecreatetruecolor($newimg_width, $newimg_height); // 超過256色改用這個

  //進行裁切
  imagecopy($newimg, $fromimg, 0,0,$fromimg_startx,$fromimg_starty,$newimg_width,$newimg_height);

  return $newimg;
 }

上傳檔案 imgAreaSelect影像裁切,上傳影像從A到B主機

nlstudio

網誌存檔