最近接触的项目中,经常遇到需要canvas绘制图片的需求,比如拼图,比如图片编辑等。canvas处理后的图片必然涉及到保存,
因此,下面方法也许是你需要的~
思路:
1.使用 toDataURL()方法导出canvas图片,此时得到base64的数据
2.将base64数据封装blob对象
3.组装FormData
4.ajax上传
当然,上传过程需要服务端的童鞋来配合,比如设置跨域,比如约定字段。。。
一个简陋的demo:
function handleSave () {
//导出base64格式的图片数据
var mycanvas = document.getElementById("mycanvas");
var base64Data = mycanvas.toDataURL("image/jpeg", 1.0);
//封装blob对象
var blob = dataURItoBlob(base64Data);
//组装formdata
var fd = new FormData();
fd.append("fileData", blob);//fileData为自定义
fd.append("fileName", "123jpg");//fileName为自定义,名字随机生成或者写死,看需求
//ajax上传,ajax的形式随意,JQ的写法也没有问题
//需要注意的是服务端需要设定,允许跨域请求。数据接收的方式和<input type="file"/> 上传的文件没有