前言
圖片可以經由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
中的設定。