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 ...
最新文章
- 【VritualBox】虚拟机VirtualBox中ubuntu下加载USB设备报错:busy with a previous request.Plaease try again later
- DS博客作业05--树
- mysql备份与还原
- 1005 矩阵快速幂
- mysql锁机制(Innodb引擎)
- 微软作为金牌会员加入Cloud Foundry基金会
- libxml2编译错误问题
- Java经典编程题50道之四十二
- sql server 2000:不能打开到主机的连接,在端口1433:连接失败
- redhat 5.4 搭建本地YUM源
- filezilla server 下载、安装、配置教程(包含新版使用配置)
- 万用表测试软件,最全的万用表使用方法看这里!
- css代码中的ul和li是什么意思呢
- 人工智能AI 生成的艺术:从文本到图像
- IDEA上的GIT PULL的各选项含义
- T00ls Lpk Sethc 首创lpk劫持方式粘滞键后门,体积超小!
- 云数据库PostgreSQL新人怎样上手
- 600G计算机、编程语言网盘分享链接
- Ubuntu 版本 微信
- 互联网晚报 |12/2星期五 | 天猫向ofo及戴威索要5亿借款;优衣库创始人称在中国开3K家店还不够;国美电器回应已被破产清算...
热门文章
- 执行webpack发生了什么?
- Java订单交易_Java实现获取105发卡平台的订单信息
- linux函数 取值溢出,Linux eCryptfs工具parse_tag_3_packet()函数堆溢出漏洞
- cad加载dll_关于CAD三维建模的35个问题
- Python迭代文件对象
- linux安装oracle tar,在linux as4上用tar方式安装oracle 10g步骤教程-Oracle
- php页面自分页刷新,详解PHP+AJAX无刷新分页实现方法
- 20190804:有效的括号(误删补发)
- w ndows10电脑配置看哪里,win10对电脑配置要求及如何查看电脑配置
- java 判断是否整数倍_java怎样实现判断一个最高达1000位数字的整数是不是3的倍数。...