javascript ~~canvas url blob转换
1.canvas转换为dataURL (从canvas获取dataURL)
var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);
2.File对象转换为dataURL、Blob对象转换为dataURL
function readBlobAsDataURL(blob, callback) { var a = new FileReader(); a.onload = function(e) {callback(e.target.result);}; a.readAsDataURL(blob);}//example:readBlobAsDataURL(blob, function (dataurl){ console.log(dataurl);});readBlobAsDataURL(file, function (dataurl){ console.log(dataurl);});
3.dataURL转换为Blob对象、dataURL转换为File对象
function dataURLtoBlob(dataurl) { 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 Blob([u8arr], {type:mime});}function 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});}//test:var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');var file = dataURLtoFile('data:text/plain;base64,YWFhYWFhYQ==', 'test.txt');
4.dataURL图片数据绘制到canvas
var img = new Image(); img.onload = function(){canvas.drawImage(img); }; img.src = dataurl;
5.File,Blob的图片文件数据绘制到canvas
readBlobAsDataURL(file, function (dataurl){ var img = new Image(); img.onload = function(){ canvas.drawImage(img); }; img.src = dataurl;});
6.Canvas转换为Blob对象并使用Ajax发送
var dataurl = canvas.toDataURL('image/png');var blob = dataURLtoBlob(dataurl);//使用ajax发送var fd = new FormData();fd.append("image", blob, "image.png");var xhr = new XMLHttpRequest();xhr.open('POST', '/server', true);xhr.send(fd);
转载于:https://blog.51cto.com/dd118/2347359
javascript ~~canvas url blob转换相关推荐
- javaScript中URL编码转换
在使用url进行参数传递时,经常会传递一些中文名的参数或带特殊字符的参数或URL地址,在后台处理时会发生转换错误.在有些传递页面使用GB2312,而在接收页面使用UTF8,这样接收到的参数就可能会与原 ...
- JavaScript中的Blob你知道多少
很多开发者可能用过Blob,但是却并没有认真了解过Blob是什么?Blob的API有哪些?我们什么时候会用到Blob? 下面跟我一起详细了解下Blob吧~ 一.Blob 是什么 Blob(Binary ...
- Google App Engine for Java下的URL编码转换问题
URL编码问题 此部分参考英文资料: http://www.blooberry.com/indexdot/html/topics/urlencoding.htm http://www.w3school ...
- JavaScript的类型自动转换高级玩法JSFuck
0 前言 最开始是不小心在微信公众号(程序员大咖)看到一篇JS的高逼格代码,然后通过里面的链接跳转到了JSFuck的wiki,就像顺着迷宫找宝藏的感觉,感叹JS的自动类型转换的牛逼. 1 样例 (!( ...
- 转换blob类型的数据,然后进行下载各种文件,还有各种blob转换的文件类型
转换blob类型的数据,然后进行下载各种文件 ress //返回的数据流 var blob = new Blob(ress, {type: 'application/vnd.ms-excel;'}); ...
- JS javascript实现url编码和url解码(urlEncode urlDecode)
本文转自:JS javascript实现url编码和url解码(urlEncode urlDecode) 转载请保留. 表单通过get方式提交中文数据时,提交的中文会被转化为类似"%CC% ...
- 用JavaScript获取URL中的参数值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- url充定向 html转义,html、javascript、url特殊字符的转义诠释及使用方法详解
html.javascript.url特殊字符转义在实际编程中都是有用到的,有的人对特殊字符转义的使用不是很清楚,下面就对html,javascript,url特殊字符的转义做一下说明和归纳. htm ...
- 通过url,获取html内容,并解析,如何使用 JavaScript 解析 URL
在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点. 开始 创建一个以下内容的 HTML 文件,并在浏览器中打开. JavaScript URL parsin ...
最新文章
- eclipse/myeclipse 中,如何删除已经下载过的插件(举例:删除scala ide)
- android浮动文本,android – 如何将文本添加到浮动操作按钮?
- win8.1 无法安装 net framework3.5的解决办法
- 工作之余,如何再赚一份收入?
- 中科曙光:与VMware合资公司是技术公司
- Bootstrap媒体对象
- CentOS图形界面和命令行切换
- MySQL · 案例分析 · RDS MySQL线上实例insert慢常见原因分析
- 5ecsgo启动失败2错误代码2_单机多实例--启动2个Elasticsearch Cluster
- 为什么在Linux执行自己的程序要在前面加./
- python django框架 比php_django 第一感觉对比 php 各大框架
- python 正则表达式简介
- oracle重做日志的信息,Oracle重做日志和日志挖掘
- nirsoft,很好的工具库
- Pollard-rho的质因数分解
- 操作系统的概念(定义)
- 盈利能力分析之-毛利率、销售净利率、投资回报率、权益回报率、资产回报率...
- 4个漂亮的wordpress企业主题
- iphone控制中心自定义没有计算机,如何在iPhone上自定义iOS 11控制中心功能
- Java-小写字母转换大写字母
热门文章
- 小程序优化的20中策略
- java实验常见错误_java 实验4 异常
- Python摄像头录制视频保存到本地
- 更改git提交显示的用户名
- 阿里云rds mysql 并发_干货 | 浅析RDS MySQL 8.0语句级并发控制-阿里云开发者社区
- 自动化测试C语言程序,自动化测试程序之一自定义键盘的模拟测试程序(C语言)...
- android获取有线、wifi、3G(4G)的IP
- 行车路途出现意外6个急救绝招
- Java检查字符串是否包含中文字符
- 谷歌提出新型自动语音识别数据增强大法,直接对频谱图“动刀”,提升模型表现...