基於圖片的cdn最終得到blob對象

基於圖片的cdn最終得到blob對象

1. 實現並不是直接下載cdn圖片,所以最終blob數據大小和cdn原圖有偏差
2. 通過cdn判斷資源是否是圖片
3. 通過cdn鏈接拿到圖片資源,繪製在畫布上
4. canvas上下文的方法,轉爲base64格式
5. base64轉化爲blob對象
6. 有多張cdn圖片需要處理爲blob的情況下,請妥善使用Promise處理異步事件
7. 此方法適合對按cdn圖片格式最終轉化成的圖片格式對應的需求,但大小方面需要自己判斷後壓縮
8. 如果對最終轉化圖片無格式要求,convertUrlToBase64函數中的變量ext可以直接寫成’jpeg’,利用canvas上下文,可以更加精準的壓縮

 			// 判斷文件是否爲圖片類型
            function isImage(ext) {
                if (ext == 'png' || ext == 'jpg' || ext == 'jpeg' || ext == 'gif' || ext == 'bmp') {
                    return true;
                }
            }

			 // 將圖片地址轉換爲 base64 格式
            function convertUrlToBase64(url) {
                return new Promise(function (resolve, reject) {
                    let img = new Image();
                    img.crossOrigin = 'Anonymous';
                    img.src = url;
                    img.onload = function () {
                        let canvas = document.createElement('canvas');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        let ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
                         //ext寫成jpeg,並且toDataURL傳入第二個參數quality,值在0-1之間,quality默認是0.92
                        let dataURL = canvas.toDataURL('image/' + ext);
                        let base64 = {
                            dataURL: dataURL,
                            type: 'image/' + ext,
                            ext: ext
                        };
                        resolve(base64);
                    };
                });
            }

            // 將 base64 轉換位 blob 對象
            function convertBase64UrlToBlob(base64) {
                let parts = base64.dataURL.split(';base64,');
                let contentType = parts[0].split(':')[1];
                let raw = window.atob(parts[1]);
                let rawLength = raw.length;
                let uInt8Array = new Uint8Array(rawLength);
                for (let i = 0; i < rawLength; i++) {
                    uInt8Array[i] = raw.charCodeAt(i);
                }
                return new Blob([uInt8Array], {type: contentType});
            }

			//url是圖片cdn地址,cb是回調
			function cdnToBlob(url,cb) {
                // 通過地址判斷是否爲圖片類型文件
                let ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase();
                if (isImage(ext)) {
                    convertUrlToBase64(url).then(function (base64) {
                        if (typeof cb === 'function') cb(convertBase64UrlToBlob(base64));
                    });
                }
            }
            
           
			cdnToBlob(
			'一張圖片cdn的地址',
			function(blob){
				console.log(blob)
			})