介绍 function handleSave (), {
,,,,,,,//导出base64格式的图片数据
,,,,,,,var mycanvas =, . getelementbyid (“mycanvas");
,,,,,,,var base64Data =, mycanvas.toDataURL(“图像/jpeg",, 1.0);
,,,,,,,//封装团对象
,,,,,,,var blob =, dataURItoBlob (base64Data);
,,,,,,,//组装formdata
,,,,,,,var fd =, new FormData ();
,,,,,,,fd.append (“fileData",, blob);//fileData为自定义
,,,,,,,fd.append (“fileName",,“123 jpg");//文件名为自定义,名字随机生成或者写死,看需求
,,,,,,,//ajax上传,ajax的形式随意,金桥的写法也没有问题
,,,,,,,//需要注意的是服务端需要设定,允许跨域请求。数据接收的方式和& lt; input 类型=癴ile"/祝辞,上传的文件没有区别
,,,,,,,var xmlHttp =, new XMLHttpRequest ();
,,,,,,,xmlHttp.open (“POST",,“你发送上传请求的url”);
,,,,,,,xmlHttp.setRequestHeader (“Authorization", & # 39; Bearer & # 39;, +, localStorage.token);//设置请求消息头,按需设定,非必须
,,,,,,,xmlHttp.send (fd);
,,,,,,,//ajax回调
,,,,,,,xmlHttp.onreadystatechange =,(),=祝辞,{
,,,,,,,,,,,//todo , your 代码…
,,,,,,,};
,,,};
function dataURItoBlob (base64Data), {
,,,var byteString;
,,,if (base64Data.split (& # 39; & # 39;) [0] .indexOf (& # 39; base64 # 39;),祝辞=,0)
,,,,,,,byteString =, atob (base64Data.split (& # 39; & # 39;) [1]);
,,,
,,,,,,,byteString =, unescape (base64Data.split (& # 39; & # 39;) [1]);
,,,var mimeString =, base64Data.split (& # 39; & # 39;) [0] .split (& # 39;: & # 39;) [1] .split (& # 39;; & # 39;) [0];
,,,var ia =, new Uint8Array (byteString.length);
,,,for (var 小姐:=,0;,小姐:& lt;, byteString.length;,我+ +),{
,,,,,,,ia[我],=,byteString.charCodeAt(我);
,,,}
,,,return new Blob ([ia],,{类型:,mimeString});
}; function b64ToUint8Array (b64Image), {
,,var img =, atob (b64Image.split (& # 39; & # 39;) [1]);
,,var img_buffer =, [];
,,var 小姐:=,0;
,,while (小姐:& lt;, img.length), {
,,,,,img_buffer.push (img.charCodeAt(我));
,,,,,我+ +;
,,}
,,return new Uint8Array (img_buffer);
}
var b64Image =, canvas.toDataURL(& # 39;图像/jpeg # 39;);
var u8Image ,=, b64ToUint8Array (b64Image);
var formData =, new FormData ();
formData.append (“image", new Blob (, u8Image ,,{类型:,“图像/jpg"}));
var xhr =, new XMLHttpRequest ();
xhr.open (“POST",,“/api/upload",,真的);
xhr.send (formData);
小编给大家分享一下如何导出HTML5画布中图片并上传服务器功能,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
导HTML5 Canvas图出片,并上传服务器
最近接触的项目中,经常遇到需要帆布绘制图片的需求,比如拼的图,比如图片编辑等.canvas处理后的图片必然涉及到保存,
因此,下面方法也许是你需要的~
<强>思路:
1。使用toDataURL()方法导出画布图片,此时得到base64的数据
2。将base64数据封装团对象
3。组装FormData
4。ajax上传
当然,上传过程需要服务端的童鞋来配合,比如设置跨域,比如约定字段…
一个简陋的演示:
<>强知识点扩展:
<强> HTML5画布转化成图片后上传服务器
用上面这种方式在前端通过js处理,服务器端不需要进行任何额外处理。
我认为是最方便最直接的办法,反而很多高赞回复,需要服务器进行各种处理,不推荐。
将画布base64编码的图像用Uint8Array Blob。
看完了这篇文章,相信你对“如何导出HTML5画布中图片并上传服务器功能”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
