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发送的更多相关文章

  1. 关于web前端base64转换为Blob,存入数组后 ajax请求传输到后端 接受不到文件问题

    前端console输出是正常Blob对象,通过ajax formdata 传输到 后端java SpringMvc用MultipartFile接受却一直接受不到,后来直接解析HttpServletRe ...

  2. [转] Blob对象

    Blob是计算机界通用术语之一,全称写作:BLOB(binary large object),表示二进制大对象.MySql/Oracle数据库中,就有一种Blob类型,专门存放二进制数据.在javas ...

  3. js,JQ 图片转换base64 base64转换为file对象,blob对象

    //将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...

  4. Ajax详解及其案例分析------如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

  5. ajax对象。同步与异步及ajax发送请求

    ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了 ...

  6. 利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传

    最近客户要求实现论坛贴子附件裁剪功能,没有考虑js与ios.android容器交互解决方案,单纯用js去实现它的.由于本来附件上传用的别的插件实现的,所以是在此基础上费了不少劲,才把jQuery-ph ...

  7. html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  8. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...

  9. base64格式图片转换为FormData对象进行上传

    原理:理由ArrayBuffer.Blob和FormData var base64String = /*base64图片串*/; //这里对base64串进行操作,去掉url头,并转换为byte va ...

随机推荐

  1. Process.Start() 传递参数中有空格问题

    项目->   (工程名)属性-> 调试-> 命令行参数 1.在命令行下执行 参数之间用空格分隔开就可以了,如果参数有空格,以双引号风格 Test   aa   "bb   ...

  2. appium+python自动化45-夜神模拟器连不上(adb server version (36) doesn't match this client (39); killing...)

    前言 最新下了个最新版的夜神模拟器,然后adb devices发现连不上模拟器了,报adb server version (36) doesn't match this client (39); ki ...

  3. Unity3d通用工具类之定时触发器

    时隔多日,好不容易挤出点时间来写写博文.不容易,请送我几朵红花,点个赞也行. 今天呢,我们主要来扩展下通用工具类==>定时触发器. 顾名思义,所谓的定时触发器,就是告诉程序在过多长时间后,我要执 ...

  4. SQL locate()函数

    LOCATE(substr,str), LOCATE(substr,str,pos) 第一个语法返回字符串str第一次出现的子串substr的位置. 第二个语法返回第一次出现在字符串str的子串sub ...

  5. Ceph源码解析:概念

    Peering:一个PG内的所有副本通过PG日志来达成数据一致的过程.(某PG如果处于Peering将不能对外提供读写服务) Recovery:根据Peering的过程中产生的.依据PG日志推算出的不 ...

  6. JavaScript 创建类/对象的几种方式

    在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量 ...

  7. Verilog语法

    语法子集很小,易用. 模块:module…endmodule 端口:input,output,inout(双向特殊) inout比较难用,有一张真值表,需要大家观察后书写,基本原则就是输入时一定是高阻 ...

  8. 【Web】Rest API 验证授权如何做?

    参考资料: [Web]Rest && 权限管理等:http://www.itdadao.com/2016/03/15/593144/ 无需OAuth就可以设计一个安全的REST (We ...

  9. Media-媒介(媒体、介质)【译】

    Media-媒介(媒体.介质) 转载请注明来源:http://blog.csdn.net/lifeshow           Android支持定制的媒介解码器,需要将定制的解码器接口暴露给框架. ...

  10. json字符串跟objective-c模型的相互转换

    在当今这样一个各种openapi开放的年代,在熟悉的语言下面找到一款得心应手的将json字符串转换成模型的库可以说是十分必要的,在NET平台下,我们有Newtonsoft.Json这个库使用,那么在i ...