php與ajax結合在一起如何處理圖片（代碼）

最後更新：2018-08-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這篇文章給大家介紹的內容是關於PHP中Trait的特性以及用法介紹（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

1、處理儲存 base64編碼的圖片，並返回儲存的圖片URL（可用來處理儲存CANVAS轉成的圖片的）
2、處理圖片，並返回 base64編碼的圖片（一般解決JS跨域的問題）

demo代碼（測試請用伺服器環境：localhost）：

<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test</title></head> <body>    <div>1、處理儲存 base64編碼 的圖片，並返回儲存的圖片URL</div><img id="get_imgUrl" src="" /><div>2、處理圖片，並返回 base64編碼 的圖片</div><img id="get_base64" src="" /> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">//1、處理儲存 base64編碼 的圖片，並返回儲存的圖片URLfunction getNewImgUrl(){//    var new_img_src = mycanvas.toDataURL("image/jpg");    var new_img_src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAzFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////8slq////8fkKoolK4qla7q9fcikasVi6fs9vhkssVgsMMlk60bjqliscTp9Pfe7/P7/f6Fw9GXy9jV6u/R6e5Np7vv9/m53OWr1eBYrcA4nLRJpLr1+vzj8vVut8nF4ukKhaKAwM9er8L3+/3W6/B/v8+BkGs6AAAAHnRSTlMAA2QdWCLjy/bu68iSe3heH/h1CucH8s6fnZuajswXGpFAAAACYElEQVQ4y42V2XriMAyFnQBlX1qg+0QOsUNMkgIJFChQaOf932nkLDN2CP1Gd5gfS+dYEkSLYaX/0h41GqP2S78yJNei0m+DEu1+pRSr9ZoA8OaE31H0HTpvANDs1S656g0AhOv5ZitmM7HdzNchHtxUi9ydxBYx51RMLGsiKOfxQqJ3Gma84tF7zClCeUwoj9/x+NVQuA4WN7epVQhqz7HUjqHm/Zh+IlcMQQ8fSvZqA7nD0bOLnM2YJBuZohrqnX8eIfBE4b5ztGB0jtpTl7qow6ZegCRTxbBzAEsmbFTUTd6jCfuYWsIPwPHo3/TJTx0sh8Z7aMo3MgEWXCbyXXD9mZ1xs+SjLIYvAExCxm3Y7xLBzHfAnSKZc47PEpN2e2gbpAKw5pPU4WlGIjdFbkrTc74GqJA+Ws2z8vOvJzS5PH8njrb3yTMEm9xqvGiFAhhDHausCAy6CeCZ1CHcCksnPUflLLENoU5asFTcs5OkUge1FUeX0CK3EHFLtdlzAVzNeotHcHsBUgSl80Xw/1MXxbipGNfXxfwiT2X2yGt1e56IWWr41JWkYrhJBtef0FeecECMerEp1CLypqgbRObW2kyTlbYZZk4bN9xR5BwItMaVB0njhti4P46CL0fBFvkokNoI4FQ6XN4Sh+u3HK5/4+ofjuefx1VGD2Dlly0Amx5WAD1tpXydxAVJxelLWylk3EmXlIZmS6ozJmr0krW345yla49xvkvWXu/6ImVIX1+k6FL3Xq7mIFxG0TIM5Gq+79ZISRgDsw5K1M2BQa7EcGA+PrQAWg+P5kD/+/gDFJSp26C1IkoAAAAASUVORK5CYII=';    dataImg = new_img_src.substring(22);    $.ajax({            type:'post',            url:'filesave.php',            data:{dataimg:dataImg,datatype:'get_imgUrl'},            beforeSend:function(){            },success:function(str){                $('#get_imgUrl').attr('src', str);            }    });}getNewImgUrl();  //////////////////////////////////////////////////////////////////////  //2、處理圖片，並返回 base64編碼 的圖片getBase64Img('http://qr.topscan.com/api.php?&w=100&m=10&fg=E60012&bg=E3CFB3&text=' + encodeURIComponent('https://blog.csdn.net/') , function(data){//    base64img = new Image();//    base64img.src = data;    $('#get_base64').attr('src', data);});function getBase64Img (sourceImgUrl , callback){//    var sourceImgUrl = 'http://qr.topscan.com/api.php?&w=200&m=0&fg=E60012&bg=E3CFB3&text=' + encodeURIComponent('https://blog.csdn.net/');    $.ajax({            type:'post',            url:'filesave.php',            data:{dataimg:sourceImgUrl,datatype:'get_base64'},            beforeSend:function(){            },success:function(str){                callback(str);            }    });}</script>    </body></html>

filesave.php代碼：

<?phpfunction rndStr(){    $string = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';    $len = rand(0,3)+5;    $rst = '';    $strl = strlen($string);    for($i=0;$i<$len;$i++){        $ind = rand(0, $strl);        $s = $string[$ind];        $rst .= $s;    }    return $rst;}//要處理的類型$type = $_POST['datatype'];//要處理的圖片（正常url圖片 / base64編碼圖片）$getImg = $_POST['dataimg'];//1、處理儲存 base64編碼 的圖片，並返回儲存的圖片URL（可用來處理儲存CANVAS轉成的圖片的）if($type == 'get_imgUrl'){//以目前時間+隨機字串設定的不會重複的檔案名稱$name = time() . rndStr();$img = str_replace(' ', '+', $getImg);$img = base64_decode($img);//儲存圖片，注意檔案夾是否有寫入許可權$dir = iconv("UTF-8", "GBK", "upfile");if (!file_exists($dir)){mkdir ($dir,0777,true);}$f = fopen('upfile/' . $name . '.jpg', 'w+');fwrite($f, $img);fclose($f);//輸出儲存的圖片URLecho 'upfile/' . $name . '.jpg';//2、處理圖片，並返回 base64編碼 的圖片（一般解決JS跨域的問題）}else if($type == 'get_base64'){$pic = $getImg;//$arr = getimagesize($pic);//$pic = "data:{$arr['mime']};base64," . base64_encode(file_get_contents($pic));$pic = "data:image/jpg;base64," . base64_encode(file_get_contents($pic));echo $pic;}?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More