实用js方法DataUrl转为File、url转base64
声明:仅为方便自己所需,也希望能方便他人,如有侵权,联系删除。
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的更多相关文章
- js实用方法记录-指不定哪天就会用到的js方法
js实用方法记录-指不定哪天就会用到的js方法 常用或者不常用都有 判断是否在微信浏览器中 测试代码:isWeiXin()==false /** * 是否在微信中 */ function isWeix ...
- [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript
来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...
- 实用js代码大全
实用js代码大全 //过滤数字 <input type=text onkeypress="return event.keyCode>=48&&event.keyC ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DataURL与File,Blob,canvas对象之间的互相转换的Javascript
canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...
- .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 ...
- Diycode开源项目 磁盘图片缓存+自定义webViewClient+图片点击js方法
1.磁盘图片缓存器DiskImageCache 1.1.这个类很多情况都可能用的到,耦合性很低,所以分开讲. 源代码: /* * Copyright 2017 GcsSloop * * License ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- 与正则有关的JS方法结合其在项目中的应用
与正则有关的JS方法结合其在项目中的应用 前言 最近项目中用到正则匹配比较多,因此打算深入理解和总结下各个与正则有关的方法,再结合在项目中使用的情况.与正则有关的JS方法共有7个,分别是RegExp对 ...
随机推荐
- Java实现token的生成与验证-登录功能
一.token与cookie相比较的优势1.支持跨域访问,将token置于请求头中,而cookie是不支持跨域访问的: 2.无状态化,服务端无需存储token,只需要验证token信息是否正确即可,而 ...
- GRE 协议 - 和 ISP 用的协议不一样怎么办
GRE 出现的背景: 随着网络(公司)规模的增大,越来越多的公司需要在跨区域之间建设自己的分公司.但随之也就出现了这样的问题,考虑这样一个场景.公司 A 在北京和上海间开设了两家公司,由于业务的需要, ...
- windows10永久激活工具 新版win10激活工具(绝对有效的永久激活工具)
来看这篇文章的,都用过KMS了吧?对!KMS是批量激活的,激活时间是一年,如果给女神激活,此法首选呀!!!但是帮基友激活,过了一年又来找自己,作为程序员的你,脸上是不是有点挂不住然后又不想花钱去买某宝 ...
- 【支付宝SDK】沙箱调试,以及遇到的坑
from rest_framework.views import APIView from alipay import AliPay, DCAliPay, ISVAliPay from django. ...
- unity探索者之复制内容到剪贴板
版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/8417014.html unity中提供的TextEditor类,只能在window ...
- vue项目打包配置多个测试环境与生产环境,用npm命令打出不同的资源包。
1.找到package.json文件,找到script节点.再新增一个新的脚本命令 test 2.修改prod.env.js配置文件,npm_lifecycle_event代表返回当前执行的脚本名称, ...
- WARNING: The host 'db01' could not be looked up with /data/mysql/bin/resolveip. This probably means that your libc libraries are not 100 % compatible with this binary MySQL version......
Linux系统安装MySQL,环境参数: 硬件配置:CPU: Xeon(R) CPU E5-2650 v4 @ 2.20GHz 8核内存:16G硬盘:系统盘200GB 数据盘1TB 操作系统CentO ...
- 第5篇 Scrum冲刺博客
1.站立式会议 1.1 会议图片 1.2 项目进展 成员 昨日任务 今日计划完成任务 陈忠明 歌曲信息的上传/下载包 歌曲批量下载压缩包 吴茂平 完善评论系统 新消息提醒功能设计 黄海钊 修改代码规范 ...
- 使用Java8中的Optional类来消除代码中的null检查
简介 Optional类是Java 8新增的一个类,Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException). —— 每个 Java 程序员都非常了解的异常 ...
- 小案例-WebSocket实现简易聊天室
前言 在详解 HTTP系列之一讲到HTTP/2.0 突破了传统的"请求-问答模式"这一局限,实现了服务器主动向客户端传送数据.而本章将通过一种在单个TCP连接上进行全双工通信的协议 ...