canvas导入图片,html上传图片到服务器
导出HTML5画布图片，并上传服务器
最近接触的项目中，经常遇到需要帆布绘制图片的需求，比如拼图，比如图片编辑等帆布。处理后的图片必然涉及到保存，
因此，下面方法也许是你需要的~
思路：
1.使用toDataURL()方法导出帆布图片，此时得到base64的数据
2.将base64数据封装一滴对象
3.组装上传
4.ajax上传
当然，上传过程需要服务端的童鞋来配合，比如设置跨域，比如约定字段。
一个简陋的演示：
函数handleSave () { //导出base64格式的图片数据改变我画布=文档。getelementbyid(我的画布)；var base 64数据=我的画布。toda taurl( image/JPEG ，1.0)；//封装一滴对象var blob=dataURItoBlob(base 64数据)；//组装FormData var FD=new FormData()；fd.append(fileData ，blob)；//fileData为自定义fd.append(fileName ， 123 jpg )；//文件名为自定义，名字随机生成或者写死，看需求//ajax上传，ajax的形式随意，JQ的写法也没有问题//需要注意的是服务端需要设定，允许跨域请求。数据接收的方式和输入类型=文件/上传的文件没有区别var xmlHttp=new XMLHttpRequest()；xmlHttp.open(POST ，"你发送上传请求的网址");xmlhttp。setrequestheader( Authorization ， Bearer 本地存储。token)；//设置请求标题，按需设定，非必须xmlhttp。发送(FD)；//ajax回调xmlhttp。onreadystatechange=()={//todo您的代码.};};函数dataURItoBlob(base 64 data){ var byteString；if (base64Data.split(，)[0].( base64 )=0)字节串的索引=atob(base64数据。split(，)[1])；else byteString=unescape(base 64数据。split(，)[1])；var mimeString=base64Data.split(，)[0].split(:)[1].拆分(;)[0];var ia=新的uint 8数组(字节字符串。长度)；for(var I=0；I bytestring . length I){ ia[I]=bytestring。charcodeat(I)；}返回新的Blob([ia]，{ type:mime string })；};知识点扩展：
HTML5 Canvas转化成图片后上传服务器
函数b 64 touint 8数组(b 64 image){ var img=atob(b 64 image。split(，)[1])；var img _ buffer=[]；var I=0；而(我img。长度){ img _ buffer。推(img。charcodeat(I))；我；}返回新的uint 8数组(img _ buffer)；} var b 64 image=canvas。toda taurl( image/JPEG )；var u8 image=b 64 touint 8数组(b 64 image)；var formData=new formData()；formData.append(image ，new Blob([ u8Image ]，{ type: image/jpg })；var xhr=new XMLHttpRequest()；xhr.open(POST ，/api/upload ，true)；xhr。发送(formData)；用上面这种方式在前端通过射流研究…处理，服务器端不需要进行任何额外处理。
我认为是最方便最直接的办法，反而很多高赞回复，需要计算机网络服务器进行各种处理，不推荐。
必须将画布Base64编码的图像转换为Uint8Array Blob .
参考：https://堆栈溢出。com/questions/13198131/how-to-save-an-html 5-canvas-a-image-on-a-server
总结
以上所述是小编给大家介绍的导出HTML5画布图片并上传服务器功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。