Heim > Artikel > Backend-Entwicklung > So verarbeiten Sie Bilder mit PHP und Ajax zusammen (Code)

So verarbeiten Sie Bilder mit PHP und Ajax zusammen (Code)

不言Original: 2018-08-03 11:48:402687Durchsuche

Dieser Artikel stellt Ihnen die Eigenschaften und die Verwendung von Traits (mit Code) vor. Ich hoffe, dass er für Freunde hilfreich ist.

1. Verarbeiten und speichern Sie das Base64-codierte Bild und geben Sie die gespeicherte Bild-URL zurück (kann zum Verarbeiten und Speichern des von CANVAS konvertierten Bildes verwendet werden)
2. Verarbeiten Sie das Bild und geben Sie das Base64-codierte Bild zurück Bild (im Allgemeinen gelöste JS-domänenübergreifende Probleme)

Democode (bitte verwenden Sie die Serverumgebung zum Testen: 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编码 的图片，并返回保存的图片URL
function getNewImgUrl(){
//    var new_img_src = mycanvas.toDataURL("image/jpg");
    var new_img_src = &#39;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=&#39;;
    dataImg = new_img_src.substring(22);
    $.ajax({
            type:&#39;post&#39;,
            url:&#39;filesave.php&#39;,
            data:{dataimg:dataImg,datatype:&#39;get_imgUrl&#39;},
            beforeSend:function(){
            },success:function(str){
                $(&#39;#get_imgUrl&#39;).attr(&#39;src&#39;, str);
            }
    });
}
getNewImgUrl();
 
 
//////////////////////////////////////////////////////////////////////
 
 
//2、处理图片，并返回 base64编码 的图片
getBase64Img(&#39;http://qr.topscan.com/api.php?&w=100&m=10&fg=E60012&bg=E3CFB3&text=&#39; + encodeURIComponent(&#39;https://blog.csdn.net/&#39;) , function(data){
//    base64img = new Image();
//    base64img.src = data;
    $(&#39;#get_base64&#39;).attr(&#39;src&#39;, data);
});
function getBase64Img (sourceImgUrl , callback){
//    var sourceImgUrl = &#39;http://qr.topscan.com/api.php?&w=200&m=0&fg=E60012&bg=E3CFB3&text=&#39; + encodeURIComponent(&#39;https://blog.csdn.net/&#39;);
    $.ajax({
            type:&#39;post&#39;,
            url:&#39;filesave.php&#39;,
            data:{dataimg:sourceImgUrl,datatype:&#39;get_base64&#39;},
            beforeSend:function(){
            },success:function(str){
                callback(str);
            }
    });
}
</script>
 
 
 
 
</body>
</html>

filesave.php-Code :

<?php
function rndStr(){
    $string = &#39;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ&#39;;
    $len = rand(0,3)+5;
    $rst = &#39;&#39;;
    $strl = strlen($string);
    for($i=0;$i<$len;$i++){
        $ind = rand(0, $strl);
        $s = $string[$ind];
        $rst .= $s;
    }
    return $rst;
}

//要处理的类型
$type = $_POST[&#39;datatype&#39;];
//要处理的图片（正常url图片 / base64编码图片）
$getImg = $_POST[&#39;dataimg&#39;];

//1、处理保存 base64编码 的图片，并返回保存的图片URL（可用来处理保存CANVAS转成的图片的）
if($type == &#39;get_imgUrl&#39;){
	//以当前时间+随机字符串设置的不会重复的文件名
	$name = time() . rndStr();
	
	$img = str_replace(&#39; &#39;, &#39;+&#39;, $getImg);
	$img = base64_decode($img);
	
	//存储图片，注意文件夹是否有写入权限
	$dir = iconv("UTF-8", "GBK", "upfile");
	if (!file_exists($dir)){
		mkdir ($dir,0777,true);
	}
	$f = fopen(&#39;upfile/&#39; . $name . &#39;.jpg&#39;, &#39;w+&#39;);
	fwrite($f, $img);
	fclose($f);
	//输出保存的图片URL
	echo &#39;upfile/&#39; . $name . &#39;.jpg&#39;;
	
//2、处理图片，并返回 base64编码 的图片（一般解决JS跨域的问题）
}else if($type == &#39;get_base64&#39;){
	$pic = $getImg;
	//$arr = getimagesize($pic);
	//$pic = "data:{$arr[&#39;mime&#39;]};base64," . base64_encode(file_get_contents($pic));
	$pic = "data:image/jpg;base64," . base64_encode(file_get_contents($pic));
	echo $pic;
}
?>

Empfohlene verwandte Artikel:

Benennungsregeln für PHP-Variablen und Verwendung von PHP-Variablen (mit Code)

PHP-Implementierung verschiedener Operationsdateien Zusammenfassung der Methoden (mit Code)

Das obige ist der detaillierte Inhalt vonSo verarbeiten Sie Bilder mit PHP und Ajax zusammen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php ajax JS canvas

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einfache Analyse der Ausführungsfunktionen von PHP-Systemprogrammen (System, Durchgang, Exec) (mit Code)Nächster Artikel：Einfache Analyse der Ausführungsfunktionen von PHP-Systemprogrammen (System, Durchgang, Exec) (mit Code)

In Verbindung stehende Artikel

Mehr sehen