声明:仅为方便自己所需,也希望能方便他人,如有侵权,联系删除。

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

随机推荐

  1. CSS3秘笈复习:第九章&amp;第十章

    第九章 1.和链接有关的伪类: (1):link,未访问过的链接 (2):visited,已访问过的链接 (3):hover,鼠标悬停链接 (4):active,单击链接时 这四种方式一定要严格按上面 ...

  2. IdentityServer4实现Token认证登录以及权限控制

    相关知识点 不再对IdentityServer4做相关介绍,博客园上已经有人出了相关的系列文章,不了解的可以看一下: 蟋蟀大神的:小菜学习编程-IdentityServer4 晓晨Master:Ide ...

  3. Hive实际应用小结

    1.简介 Hive是数据仓库平台,构建在Hadoop之上用来处理结构化数据.Hive是一个SQL解析引擎,能够将SQL语句转化成MapReduce作业并在Hadoop上执行,从而使得查询和分析更加方便 ...

  4. 关于新手用java写题目,遇到的字符和字符串问题

    我看到一遍很好的博客: https://blog.csdn.net/qq_37267015/article/details/78738512 1.首先了,java之中,没有像C语言那样的getchar ...

  5. 在Word2007,2010,2016中分栏但不换页的方法

    解决方法: word2007:界面左上角的按钮->选择word选项->依次点击“高级”->“版式选项”->点开加号,“按word6.x/95/97的方式排放脚注”. Word2 ...

  6. Sublime Text 使用方法

    1. 官网下载安装 http://www.sublimetext.com/ 2.安装 Package Control 1)ctrl+~ : 呼出控制台 2)在控制台输入一下代码: import url ...

  7. WebRTC网关服务器单端口方案实现

    标准WebRTC连接建立流程 这里描述的是Trickle ICE过程,并且省略了通话发起与接受的信令部分.流程如下: 1) WebRTC A通过Signal Server转发SDP OFFER到Web ...

  8. HDOJ-1124 Factorial 数论

    题意哇:求N!末尾多少个0. 很容易想到转化为求N!中5因子的个数.但是从数据范围来看必然不可能一个一个算出来. 所以这里借用数论的一个知识. 如果p是素数,那么n!中p因子的个数可以表示为1-n中整 ...

  9. Comet OJ CCPC-Wannafly Winter Camp Day8 A Aqours

    A Aqours 链接 分析: 给出的点可以视为是按照BFS序给的,也就是说从浅到深给出.可以再给每个节点u维护一个f值,表示离u最近的叶子节点到它的距离. 所以每当扫到一个叶子节点,就可以暴力往根节 ...

  10. Trie树子节点快速获取法

    今天做了一道leetcode上关于字典树的题:https://leetcode.com/problems/word-search-ii/#/description 一开始坚持不看别人的思路,完全自己写 ...