JS實用方法DataUrl轉爲File、url轉base64

時間 2021-01-17

標籤 javascript html java node git github ajax json canvas 小程序欄目 JavaScript 简体版

原文原文鏈接

1，DataUrl轉爲File

/**
* DataUrl轉爲File
* @param {String} dataUrl - dataUrl地址
* @param {String} fileName - file文件名
*/
dataURLtoFile(dataUrl, fileName){
    var arr = dataUrl.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 File([u8arr], fileName, {type:mime});
}

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);
        }
    })
}

// 方式二
async function request(res){
    let request = await fetch(Params);
    let res = await request.json();
    console.log(res);
};

若是看了以爲有幫助的，我是@鵬多多，歡迎點贊關注評論；
ENDjavascript

往期文章html

我的主頁java