使用canvas壓縮圖片並上傳

時間 2019-11-12
標籤使用 canvas 壓縮圖片上傳简体版
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上傳文件</title>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        /*
        三個參數
        file：一個是文件(類型是圖片格式)，
        w：一個是文件壓縮的後寬度，寬度越小，字節越小
        objDiv：一個是容器或者回調函數
        photoCompress()
        */
        function photoCompress(file, w, objDiv) {
            var ready = new FileReader();
            /*開始讀取指定的Blob對象或File對象中的內容. 當讀取操做完成時,readyState屬性的值會成爲DONE,若是設置了onloadend事件處理程序,則調用之.同時,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容.*/
            ready.readAsDataURL(file);
            ready.onload = function () {
                var re = this.result;
                canvasDataURL(re, w, objDiv)
            }
        }
        function canvasDataURL(path, obj, callback) {
            var img = new Image();
            img.src = path;
            img.onload = function () {
                var that = this;
                // 默認按比例壓縮
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = 0.7;  // 默認圖片質量爲0.7
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 建立屬性節點
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 圖像質量
                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                    quality = obj.quality;
                }
                // quality值越小，所繪製出的圖像越模糊
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回調函數返回base64的值
                callback(base64);
            }
        }
        /**
        * 將以base64的圖片url數據轉換爲Blob
        * @param urlData
        *            用url方式表示的base64圖片數據
        */
        function convertBase64UrlToBlob(urlData) {
            var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }


      
        //上傳文件方法
        function UpladFile() {
            var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象

            photoCompress(fileObj, {
               width:1000
            }, function (base64Codes) {
                jQuery.ajax({
                    async: true,
                    type: "POST", //用POST方式傳輸
                    dataType: "text", //數據格式:JSON
                    url: 'http://localhost:804/Ajax/APIS.ashx?time=' + new Date().getMilliseconds(), //目標地址
                    data: "base64=" + base64Codes + "&action=ajaxFileUpload",
                    success: function (msg) {
                        alert(msg);
                    }

                });
            });

        }

       

       
    </script>
</head>
<body>
使用canvas形式壓縮圖片並上傳：
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" accept="image/x-png, image/jpg, image/jpeg, image/gif"/>
<input type="button" onclick="UpladFile()" value="上傳" />
</body>
</html>