顯示廣告
隱藏 ✕
回列表(←)
Disp BBS guest 註冊 登入(i) 線上人數: 686
首頁(home) 上頁(↑) 下頁(↓) 末頁(end)
看板 Knuckles_note
作者 Knuckles (站長 那克斯)
標題 [JS] 單鍵上傳圖片 上傳前使用canvas縮圖
時間 2015年02月15日 Sun. AM 07:04:53

點一個按鈕選好檔案就開始上傳圖片
並且限制圖檔大小，太大會縮小後再上傳

範例頁: http://knuckles.disp.cc/test/imgur/imgUpload.php

在網頁上使用表單上傳圖片時:




結果像這樣:
[圖]

要先點「選擇檔案」後，還要再點「上傳」，圖片才會上傳

如果想要選擇檔案後，就直接開始上傳的話
可以只放一個 type="file" 的 input




然後在 Javascript 利用 input 的 onChange 事件來執行上傳圖片


如果想要自訂上傳按鈕的樣式的話
可以產生一個自訂的按鈕，然後再把隱形的 input 放在上面
例如:

單鍵上傳:


上傳圖片


將 input 設為 opacity: 0; font-size: 0;
並將大小與位置設成剛好可以覆蓋住自訂的按鈕即可
結果會像這樣:
[圖]



接著將 input 讀到的 file 傳給 function imgFileUpload() 來上傳圖片
可設定寬度與高度的上限，若上傳的圖片太大時先會縮小後再上傳
參考: http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

加上一個textarea用來接收回傳的圖片網址
上傳圖片的網址:


選好擋案時會先在 textarea 插入字串 [img {id} uploading...]
其中 id 為 imgFileUpload 中隨機產生的字串，用來辨別不同的上傳檔案
等上傳成功後再將這個字串改為回傳的圖片網址

修改 imgFileUpload 輸入的 onSubmit 和 onComplete 為
var uploadResult = document.getElementById('upload-result');
imgFileUpload(file, {
action: 'imgur_upload_base64.php',
onSubmit: function(id){ //選好檔案後要做的事
var anchor_str = "[img "+id+" uploading...]\n";
uploadResult.value += anchor_str;
},
onComplete: function(responseJSON,id){ //上傳完成後要做的事
var data = responseJSON.data;
if(!responseJSON.success){ alert(data.error); }
var anchor_str = "[img "+id+" uploading...]\n";
var bbcode = '[img='+data.width+'x'+data.height+']'+data.link+"[/img]\n";
uploadResult.value = uploadResult.value.replace(anchor_str,bbcode);
}
});


用來上傳圖片的 function imgFileUpload() 程式碼：


其中使用了 canvas 來縮小圖片大小
然後將 canvas 轉為圖片的 base64 編碼
最後將 base64 傳給網站的 imgur_upload_base64.php

$image_base64 = isset($_POST['base64'])? $_POST['base64'] : '';
if(!$image_base64){ die('base64 error'); }
$imgur_result = imgur_upload($image_base64);
echo $imgur_result;

//利用 Imgur API 上傳圖片的程式，請參考 http://disp.cc/b/11-8qWb
function imgur_upload(){ ... }


改寫成 jQuery plugin 可參考: http://disp.cc/b/11-8uGt


--
※ 作者: Knuckles 時間: 2015-02-15 07:04:53
※ 編輯: Knuckles 時間: 2015-10-23 05:43:36
※ 同主題文章:
● 02-15 07:04 Knuckles □ [JS] 單鍵上傳圖片 上傳前使用canvas縮圖
　 02-17 10:15 Knuckles □ [JS] 單鍵縮圖上傳圖片 imgUpload - jQuery Plugin
※ 看板: KnucklesNote　文章推薦值: 0 目前人氣: 0 累積人氣: 4697　
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇