[Web] 圖片處理

前言

圖片可以經由Base64編碼在網路間傳遞,再存成檔案。

File API

首先使用File API將圖片轉成Base64編碼,這邊使用的是選擇多個檔案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" height="50" width="50" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

PHP

取得span中圖片的src傳給PHP。

1
2
3
4
$img = $_POST['IMG'] ;
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
file_put_contents("pic.png", $data);

Lossy Gif Compressor

PNG壓縮的套件許多,這邊找一個GIF壓縮的。

首先先安裝Gifsicle,再將lossygif放到目錄下。

可以透過PHP下指令執行將圖片壓縮,但要記得修改php.ini中的設定。