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

原文地址:https://www.cnblogs.com/fps2tao/p/9272196.html

时间: 2024-09-29 10:57:50

Canvas转换为Blob对象并使用Ajax发送的相关文章

Base64转换为blob对象

在开发过程中有时候需要针对base64的编码转换为blob对象,js中转化方法如下 其中 nowFrame为base64对象 var arr = nowFrame.split(','); var mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } var b

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

ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了open方法,但是未调用send方法 2:已调用send方法进行请求 3:正在接收数据(接收到一部分),客户端已经接收到了一部分返回的数据 4:接收完成,客户端已经接收到了所有数据 * status :http响应状态码 200代表成功获取服务器端数据 404未找到页面等等…… statusText

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

最近客户要求实现论坛贴子附件裁剪功能,没有考虑js与ios.android容器交互解决方案,单纯用js去实现它的.由于本来附件上传用的别的插件实现的,所以是在此基础上费了不少劲,才把jQuery-photoClip裁剪功能垒上去,但好再最后成功实现了.在实现过程中遇到了几个问题,记下来和大家一起学习研究. 由于安全原因,是不允许js操作文件的.所以jQuery-photoClip裁剪下来的是base64字符串,把此字符串上传后台解码为文件,就可以了.但是如果字符串过大,用post或geth上传就

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

先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html页面 需要引入weui.min.css 不然没法渲染样式, 将下面的代码放在需要上传文件的地方就行了,如果不需要图片旋转功能, 可以直接删掉那个div, 改不改js无影响 addPhoto.html <!--图片缩略图--> <div class="weui-cells weui-

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

主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j

Ajax发送post请求

//创建Ajax对象(兼容处理) function createXHR() { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } return xhr; } //发送post请求 function request(){ xhr.open('P

ajax发送异步请求

一:得到XMLHttpRequest对象 ajax其实只需要学习XMLHttpRequest一个对象 大多数浏览器都支持: var xmlHttp = new XMLHttprequest(); IE 6.0: var mltHttp = new ActiveXObject("Msxml2.XMLHTTP"); IE 5.5 及更早的IE var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); * 编写创建XMLH

JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)

一.使用Ajax发送get请求 发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数:为Ajax对象的 onreadystatechange事件设定响应函数 - 发送请求:调用Ajax对象的send方法 - 获取Ajax对象     - 创建请求 - 注意: - true:表示发送异步请求(当Ajax对象发送请求时,用户仍然可以对当前页面做其它的操作) - false:表示发送同步

AJAX的来龙去脉(由来)-如果被封装出来的--ajax发送异步请求(四步操作)

<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打包ajax生成小工具.avi;  有介绍: 个人理解:就是封装了 XMLHttpRequest 的请求方法:演变而成我们常用的 ajax: =====原始的请求方式: ajax发送异步请求(四步操作) 1. 第一步(得到XMLHttpRequest) * ajax其实只需要学习一个对象:XMLHttpRequ