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. 用asyncio的异步网络连接来获取sina、sohu和163的网站首页

    代码如下: import asyncio async def wget(host): print('wget %s...' % host) connect = asyncio.open_connect ...

  3. selector简介

    最近在学习java NIO,发现java nio selector 相对 channel ,buffer 这两个概念是比较难理解的 ,把学习理解的东西以文字的东西记录下来,就像从内存落地到硬盘,把内存 ...

  4. iOS面试题合集(77道)

    1.#import和#include的区别 @class? @class一般用于头文件中需要声明该类的某个实例变量的时候用到,在m文 件中还是需要使用#import 而#import比起#includ ...

  5. sql server触发器复制记录

    Create Trigger test_tri5 on test after insert as begin declare @id sysname, @tel sysname, @name sysn ...

  6. vim文本编辑工具—修改文件内容

    在vim中进行文本替换: 1.替换当前行中的from: :s/from/to/    (其中s是英文单词substitute第一个字母,表示替换的意思) :s/from/to/  ==  :.s/fr ...

  7. Vmware 14.0 版本中安装Ubuntu 17.10版本无法调整分辨率的问题

    装完ubuntu后发现在vmware中选择了查看-自动调整大小-自适应客户机,虚拟机也无法随着窗口大小来切换分辨率,其实是因为WAYLAND限制了. 1. 先安装vim sudo apt-get in ...

  8. 几个免费的DNS地址

    百度CDN 180.76.76.76 114.114.114.114 阿里CDN 223.5.5.5 223.6.6.6 googleCDN 8.8.8.8 国内外DNSserver地址列表 http ...

  9. 云计算之路-试用Azure:搭建自己的内网DNS服务器

    之前我们写过一篇博文谈到Azure内置的内网DNS服务器不能跨Cloud Service,而我们的虚拟机部署场景恰恰需要跨多个Cloud Service,所以目前只能选择用Azure虚拟机搭建自己的内 ...

  10. HDU-2665-Kth number(划分树)

    Problem Description Give you a sequence and ask you the kth big number of a inteval.   Input The fir ...