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

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

实用js方法DataUrl转为File、url转base64的更多相关文章

  1. js实用方法记录-指不定哪天就会用到的js方法

    js实用方法记录-指不定哪天就会用到的js方法 常用或者不常用都有 判断是否在微信浏览器中 测试代码:isWeiXin()==false /** * 是否在微信中 */ function isWeix ...

  2. [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...

  3. 实用js代码大全

    实用js代码大全 //过滤数字 <input type=text onkeypress="return event.keyCode>=48&&event.keyC ...

  4. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...

  6. .net mvc 站点自带简易SSL加密传输 Word报告自动生成(例如 导出数据库结构) 微信小程序:动画(Animation) SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法,记录一下 CryptoJS与C#AES加解密互转

    .net mvc 站点自带简易SSL加密传输   因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net ...

  7. Diycode开源项目 磁盘图片缓存+自定义webViewClient+图片点击js方法

    1.磁盘图片缓存器DiskImageCache 1.1.这个类很多情况都可能用的到,耦合性很低,所以分开讲. 源代码: /* * Copyright 2017 GcsSloop * * License ...

  8. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  9. 与正则有关的JS方法结合其在项目中的应用

    与正则有关的JS方法结合其在项目中的应用 前言 最近项目中用到正则匹配比较多,因此打算深入理解和总结下各个与正则有关的方法,再结合在项目中使用的情况.与正则有关的JS方法共有7个,分别是RegExp对 ...

随机推荐

  1. 最后之作-Last Order(bushi

    最近化学学有机选修,讲羧酸的时候我想到一个问题:不考虑空间异构.能否稳定存在等问题,某高级饱和脂肪酸有多少种同分异构体?做为一名退役的OIer,我将它抽象为了另一个问题:含\(n\)个\(C\)的饱和 ...

  2. Windows10 + Ubuntu 20.04 LTS 双系统安装 (UEFI + GPT)(图文,多图预警)

    版权声明:本文为CSDN博主「ZChen1996」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/ZChen1 ...

  3. VulnHub靶场学习_HA: Chakravyuh

    HA: Chakravyuh Vulnhub靶场 下载地址:https://www.vulnhub.com/entry/ha-chakravyuh,388/ 背景: Close your eyes a ...

  4. getting session bus failed: //bin/dbus-launch terminated abnormally with the following error: Autolaunch error: X11 initialization failed.

    今天在调试dbus程序的时候,运行程序出现了getting session bus failed: //bin/dbus-launch terminated abnormally with the f ...

  5. SpringBoot整合WebSocket实现前后端互推消息

    小编写这篇文章是为了记录实现WebSocket的过程,受不了啰嗦的同学可以直接看代码. 前段时间做项目时设计了一个广播的场景,具体业务不再赘述,最终要实现的效果就是平台接收到的信息实时发布给所有的用户 ...

  6. 团队作业4:第四篇Scrum冲刺博客(歪瑞古德小队)

    目录 一.Daily Scrum Meeting 1.1 会议照片 1.2 项目进展 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3.2 Code Review 记录 3.3 issue ...

  7. Logistic回归分析之二元Logistic回归

    在研究X对于Y的影响时,如果Y为定量数据,那么使用多元线性回归分析(SPSSAU通用方法里面的线性回归):如果Y为定类数据,那么使用Logistic回归分析. 结合实际情况,可以将Logistic回归 ...

  8. 如何简洁优雅地部署PostgreSQL和Pgweb?

    本文转自Rancher Labs 介绍PostgreSQL和Pgweb PostgreSQL是一款以可靠性和性能为人所熟知的开源数据库.它在很多行业和应用程序中都有应用,尤其是web开发人员的最爱.从 ...

  9. 调试 Ingress Nginx

    由于 Ingress Nginx 是最受欢迎的 Ingress 控制器,因此接下来我们将介绍一些有关调试 ingress-nginx 的技巧. 调试 Ingress Nginx Ingress-ngi ...

  10. Windows 远程桌面鼠标光标不可见

    一.问题描述 通过在云端的主机上部署 frp 服务,实现「使用Windows 远程桌面(RDP)从互联网侧访问内网的主机」.但是,使用 Windows 自带的远程桌面工具 RDP 连接到另一台计算机时 ...