實用js方法DataUrl轉為File、url轉base64

宣告：僅為方便自己所需，也希望能方便他人，如有侵權，聯系洗掉，

1，DataUrl轉為File

 1 /**
 2 * DataUrl轉為File
 3 * @param {String} dataUrl - dataUrl地址
 4 * @param {String} fileName - file檔案名
 5 */
 6 dataURLtoFile(dataUrl, fileName){
 7     var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
 8         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
 9     while(n--){
10         u8arr[n] = bstr.charCodeAt(n);
11     }
12     return new File([u8arr], fileName, {type:mime});
13 }

2，url轉base64

/**
* url轉base64
* @param {String} url - url地址
*/
urlToBase64(url) {
    return new Promise ((resolve,reject) => {
        let image = new Image();
        image.onload = function() {
            let canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            // 將圖片插入畫布并開始繪制
            canvas.getContext('2d').drawImage(image, 0, 0);
            // result
            let result = canvas.toDataURL('image/png')
            resolve(result);
        };
        // CORS 策略，會存在跨域問題https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        // 圖片加載失敗的錯誤處理
        image.onerror = () => {
            reject(new Error('轉換失敗'));
        };
    });
}
//使用例子
this.urlToBase64(this.Url).then(res=>{
    console.log(res);
})

3，生成Uuid

function CreateUuid() {
    let Time = new Date().getTime();
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
    .replace(/[xy]/g, function(res) {
        let Random = (Time + Math.random() * 16) % 16 | 0;
        Time = Math.floor(Time / 16);
        return (res == 'x' ? Random : (Random & 0x3 | 0x8)).toString(16);
    });
    return "pdd"+ uuid;
};

4，獲取url路徑后的引數

// 不傳name回傳所有值，否則回傳對應值
function getUrlParams(name) {
    var url = window.location.search;
    if (url.indexOf('?') == 1) { return false; }
    url = url.substr(1);
    url = url.split('&');
    var name = name || '';
    var nameres;
    // 獲取全部引數及其值
    for(var i=0;i<url.length;i++) {
        var info = url[i].split('=');
        var obj = {};
        obj[info[0]] = decodeURI(info[1]);
        url[i] = obj;
    }
    // 如果傳入一個引數名稱，就匹配其值
    if (name) {
        for(var i=0;i<url.length;i++) {
            for (const key in url[i]) {
                if (key == name) {
                    nameres = url[i][key];
                }
            }
        }
    } else {
        nameres = url;
    }
    // 回傳結果
    return nameres;
}

5，Canvas生成水印

/**
* Canvas生成水印
* @param {dom} element - dom元素
* @param {String} text - 水印文本
*/
function watermark(element, text) {
    var canvas = ''
        , ctx = ''
        , data = ''
        , fontWidth = '12.5'
        , node = document.querySelector(element)
        , width = node.clientWidth
        , height = node.clientHeight;
    canvas = document.createElement("canvas");
    canvas.width = "100";
    canvas.height = "100";
    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 200, 200);
    fontWidth = document.documentElement.clientWidth * 3 * 12.5 / 4000;
    ctx.font = fontWidth + "px 黑體";
    ctx.rotate(-20 * Math.PI / 180);
    ctx.fillStyle = "rgba(0,0,0, .2)";
    ctx.fillText(text, -20, 80);
    data = canvas.toDataURL("image/png", 1);
    node.style.background = 'url(' + data + ') repeat';
};
watermark("#canvas","相約1998");

6，請求本地Json

let Params = 'data/data.json';
var PddAjax2 = new Promise(PddAjax);
// 成功
PddAjax2.then(function(res){
    console.log(res)
})
function PddAjax(resolve , reject){
    this.Params = Params;
    $.ajax({
        type:'get',
        url:Params,
        success: function(res) {
            resolve(res);
        },
        error: function(res) {
            reject(res);
        }
    })
}

標籤：JavaScript

上一篇：WEB前端——前端介紹

下一篇：Proxy使用詳解