javascript - 在行動端怎麼上傳圖片？，而且在上傳前把圖片壓縮一定的大小？-php教程-PHP中文網

javascript - 在行動端怎麼上傳圖片？，而且在上傳前把圖片壓縮一定的大小？

WBOY

發布： 2016-08-30 09:36:40

原創

1128 人瀏覽過

在行動端怎麼上傳圖片？，而且在上傳前把圖片壓縮一定的大小？

回覆內容：

在行動端怎麼上傳圖片？，而且在上傳前把圖片壓縮一定的大小？

對於非同步上傳來說，如果仍想用檔案直接上傳方法的話，可以採用HTML5的FormData，具體操作可以參考這篇部落格。 http://www.cnblogs.com/lhb25/...
本人還有另外一種非同步上傳圖片的方法。先將圖片轉換成base64字串，然後再把base64字串提交到伺服器上，伺服器接收後，可以再用特定的API將base64字串轉換成圖片內容。以下為具體實作方法：

<code>var getObjectURL = function(file) {
        var url = null;   
        if (window.createObjectURL !== undefined) { // basic  
            url = window.createObjectURL(file);  
        } else if (window.URL !== undefined) { // mozilla(firefox)  
            url = window.URL.createObjectURL(file);  
        } else if (window.webkitURL !== undefined) { // webkit or chrome  
            url = window.webkitURL.createObjectURL(file);  
        }  
        return url;
    }</code>

登入後複製

getObjectURL方法用於將傳入的input中的圖片file對象，轉換成一個臨時的url，而這個url是同域的。

<code>var converImgTobase64 = function(url, callback, outputFormat) {
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback.call(this, dataURL);
            canvas = null; 
        };
        img.src = url;
    }</code>

登入後複製

converImgTobase64方法就是將上面所得到的url傳入，透過canvasAPI轉換成base64字串，注意這個url必須是同域的，不可跨域，所以getObjectURL這個方法是很有必要的。

範例：

<code>var input = $("input[type=file]")[0],
    src = getObjectURL(input.files[0]);

converImgTobase64(src, function(base64Str) {
    //处理base64Str相关的callback，可以直接在这里发送ajax请求。
});
</code>

登入後複製

這部分組件的程式碼在本人的一個util庫中，歡迎參考並提出整改意見~~~https://github.com/zero-mo/Br...

另外，圖片壓縮的話，這裡有一個是基於canvas進行操作的，你可以試試看。
http://www.cnblogs.com/xiao-y...

以下引用我之前的回答

如果不考慮相容 IE 可以用 FileReader API 讀取檔案取得檔案的 Base64 值
img 標籤可以直接用 Base647454圖片
FileReader API 參考文件：
https://developer.mozilla.org...
jQuery 剪裁圖片外掛(支援行動端)： http://www.jq22.com/jquery-in...
至於壓縮的話，剪裁之後的圖片大小自然比原圖小很多

原問題地址：https://segmentfault.com/q/10...

剛寫的文章：

https://segmentfault.com/a/11...

主要是用原生的HTML5檔案表單選擇，然後用插件壓縮，最後直接用插件輸出的FormData上傳。