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. Codeforces Gym 100269A Arrangement of Contest 水题

    Problem A. Arrangement of Contest 题目连接: http://codeforces.com/gym/100269/attachments Description Lit ...

  2. linux下activityMQ安装

    >下载 到ActiveMQ官网,找到下载点. 目前, 官网为http://activemq.apache.org/ >启动 下载到本机,并解压   wget http://apache.f ...

  3. VUE -- router 传参和获取参数

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

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

  5. Android疑难杂症之android:configChanges="orientation" 无效

    通常情况下,当“屏幕方向”变化时会销毁并重建当前Activity.而我们有时候并不希望重新创建Activity实例,然后就会在AndroidManifest.xml中配置Activity: <a ...

  6. CDK上安装kube-dashboard

    首先把addon的代码下载下来 git clone https://github.com/minishift/minishift-addons 然后进入相应的目录,运行 ericdeMacBook-P ...

  7. IngressController的session stick问题

    周末爬坑,IngressController恢复因为镜像下载和版本问题折腾一下午,晚上终于折腾出个眉目. 首先,在Kubernetes的service中是可以设置Session Affinity的.例 ...

  8. python tkinter 框架开发的收费音乐免费下载工具

    使用介绍: 工具下载地址:https://wps-oss.oss-cn-shenzhen.aliyuncs.com/Music2.exe 技术交流和赞助请前往我的咸鱼: https://market. ...

  9. 二十四种设计模式:模板方法模式(Template Method Pattern)

    模板方法模式(Template Method Pattern) 介绍定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.Template Method使得子类可以不改变一个算法的结构即可重定义该算法 ...

  10. C++ 输出代码所在的文件、行数以及函数名称

    在输出调试信息的时候,经常会用到这几个宏.首先看一段示例代码,再来介绍这几个宏: #include <stdlib.h> #include <stdio.h> //替换函数名 ...