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. PHP与mysql数据库

    1.PHP访问数据库的一般步骤 连接MySQL服务器 选择MySQL数据库 执行SQL语句(增,删,改,查) 关闭结果集,释放资源 关闭MySQL服务器的连接 需要查的表的数据: 2.连接和关闭实例 ...

  2. 基于tiny4412的Linux内核移植 -- SD卡驱动移植(五)

    作者信息 作者: 彭东林 邮箱:pengdonglin137@163.com QQ:405728433 平台简介 开发板:tiny4412ADK + S700 + 4GB Flash 要移植的内核版本 ...

  3. Lua学习笔记之开始

    在这节课的开始,按照国际惯例,一般学习一门新的语言,都是要打印出“Hello,world”,那么我们也不例外. Lua语言的打印跟其他语言一样,只要print(“Hello,World”),然后保存为 ...

  4. 翻译:Spring-Framework-Reference Document:15.2-DispatcherServlet

    写在前面的话:   最近被项目的代码折腾的死去活来的,其实框架也没有那么难理解,只是自己的Web基础太差,被Request和Response这一对神雕侠侣坑到泪流满面!今天捣腾了一下Spring We ...

  5. Linux 进程学习

    1.linux进程间通讯         继承unix进程间通讯:管道 信号         AT&T :system V IPC 通讯进程只能在单个计算机 :信号量  消息队列 共享内存   ...

  6. Hive计算的临时文件清理

    hive 的存储路径的 .hive-staging_hive_yyyy-MM-dd_HH-mm-ss_SSS_xxxx-x 文件可以清理掉吗 https://blog.csdn.net/sparkex ...

  7. LeetCode Add Binary |My Solution

    Given two binary strings, return their sum (also a binary string). For example, a = "11" b ...

  8. linux最常用命令整理

    linux vim命令跳转到文档开头或末尾 gg:命令将光标移动到文档开头 G:命令将光标移动到文档末尾 <hr/> 网络 # ifconfig # 查看所有网络接口的属性 # iptab ...

  9. Win7如何开机直接进桌面

    运行CONTROL USERPASSWORDS2 取消登陆要密码那项后再点应用,直接输入密码下次就能自己登陆进入桌面啦

  10. SDL 学习及相关API

    SDL_PeepEvents() 在事件队列中搜索特定类型的事件. int SDL_PeepEvents(SDL_Event *events, int numevents, SDL_eventacti ...