Canvas转换为Blob对象并使用Ajax发送
Canvas转换为Blob对象并使用Ajax发送
转换为Blob对象后,可以使用Ajax上传图像文件。
先从canvas获取dataurl, 再将dataurl转换为Blob对象
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.csdn.net/cuixiping/article/details/45932793
Canvas转换为Blob对象并使用Ajax发送的更多相关文章
- 关于web前端base64转换为Blob,存入数组后 ajax请求传输到后端 接受不到文件问题
前端console输出是正常Blob对象,通过ajax formdata 传输到 后端java SpringMvc用MultipartFile接受却一直接受不到,后来直接解析HttpServletRe ...
- [转] Blob对象
Blob是计算机界通用术语之一,全称写作:BLOB(binary large object),表示二进制大对象.MySql/Oracle数据库中,就有一种Blob类型,专门存放二进制数据.在javas ...
- js,JQ 图片转换base64 base64转换为file对象,blob对象
//将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...
- Ajax详解及其案例分析------如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表
本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...
- ajax对象。同步与异步及ajax发送请求
ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了 ...
- 利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传
最近客户要求实现论坛贴子附件裁剪功能,没有考虑js与ios.android容器交互解决方案,单纯用js去实现它的.由于本来附件上传用的别的插件实现的,所以是在此基础上费了不少劲,才把jQuery-ph ...
- html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
- JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...
- base64格式图片转换为FormData对象进行上传
原理:理由ArrayBuffer.Blob和FormData var base64String = /*base64图片串*/; //这里对base64串进行操作,去掉url头,并转换为byte va ...
随机推荐
- [转]spring security的原理及教程
Authentication:认证 spring security使用分类: 如何使用spring security,相信百度过的都知道,总共有四种用法,从简到深为:1.不用数据库,全部数据写 ...
- Codeforces Round #114 (Div. 1) D. Wizards and Roads 笛卡尔树+树贪心+阅读题
D. Wizards and Roads 题目连接: http://www.codeforces.com/contest/167/problem/D Description In some count ...
- golang slice 切片原理
golang 中的 slice 非常强大,让数组操作非常方便高效.在开发中不定长度表示的数组全部都是 slice .但是很多同学对 slice 的模糊认识,造成认为golang中的数组是引用类型,结果 ...
- Eclipse环境安装rust
参考 https://rustdt.github.io/ https://github.com/RustDT/RustDT/blob/latest/documentation/UserGuide.md ...
- Active Snake (Level Set 模型)
前沿:最近由于大论文实验的原因,需要整理几种Snake方法,以比较道路提取效果.所以今天晚上就将电脑中的一些LBF Snake代码作一下分类定义.并给出效果.以便比较. 1. 原始的LBF Snake ...
- VMware8安装MacOS 10.8
前一篇博客,介绍了如何利用VMware安装MacOS系统,虽然可以安装成功,但也有不友好的地方,如: 1)MacOS系统文件需要是ISO格式,不是原生的dmg格式: 2)每次开机都需要借助HJMac工 ...
- synchronized 线程同步-类级别锁定
1.demo 说明:代码中通过 printNum 方法传入参数判断 a.b 分别对 num 这个参数的值进行了修改. package demo1; import sun.applet.Main; pu ...
- hdu 1244 DP
水DP dp[i%2][j]=Max(dp[i%2][j-1],dp[1-i%2][j-l[i]]+sum[j]-sum[j-l[i]]); #include "stdio.h" ...
- 【FireMonkey】StyleBook使用方法
近期在开发一个团队文档管理工具,使用Embarcadero的XE2-C++builder进行界面开发,使用Firemonkey框架. 而这个框架十分有趣!可能吸引界面开发者的就是这个StyleBook ...
- Newtonsoft.Json.4.5.11使用方法总结---反序列化json字符串
写在开头: 最近项目需求,需要在C#中处理json字符串,毫不犹豫的下载了Newtonsoft.Json 4.5.11(2012.12.17)http://json.codeplex.com/,然后百 ...