全国咨询热线:18720358503

免费h5模板素材_导出HTML5 Canvas图片并上传服务器

类别:企业动态 发布时间:2020-12-25 浏览人次:

导出HTML5 Canvas图片并上传服务器功能   发布     这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

导出HTML5 Canvas图片,并上传服务器

最近接触的项目中,经常遇到需要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 / 上传的文件没有区别
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.open( POST , 你发送上传请求的url );
 xmlHttp.setRequestHeader( Authorization , 'Bearer ' + localStorage.token);//设置请求header,按需设定,非必须
 xmlHttp.send(fd);
 //ajax回调
 xmlHttp.onreadystatechange = () = {
 //todo your code...
function dataURItoBlob (base64Data) {
 var byteString;
 if (base64Data.split(',')[0].indexOf('base64') = 0)
 byteString = atob(base64Data.split(',')[1]);
 else
 byteString = unescape(base64Data.split(',')[1]);
 var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
 var ia = new Uint8Array(byteString.length);
 for (var i = 0; i byteString.length; i++) {
 ia[i] = byteString.charCodeAt(i);
 return new Blob([ia], {type: mimeString});
};

知识点扩展:

HTML5 Canvas转化成图片后上传服务器

function b64ToUint8Array(b64Image) {
 var img = atob(b64Image.split(',')[1]);
 var img_buffer = [];
 var i = 0;
 while (i img.length) {
 img_buffer.push(img.charCodeAt(i));
 i++;
 return new Uint8Array(img_buffer);
var b64Image = canvas.toDataURL('image/jpeg');
var u8Image = b64ToUint8Array(b64Image);
var formData = new FormData();
formData.append( image , new Blob([ u8Image ], {type: image/jpg }));
var xhr = new XMLHttpRequest();
xhr.open( POST , /api/upload , true);
xhr.send(formData);

用上面这种方式在前端通过js处理,server端不需要进行任何额外处理。

我认为是最方便最直接的办法,反而很多高赞回复,需要server进行各种处理,不推荐。

Had to convert canvas Base64-encoded image to  Uint8Array Blob .

参考:

总结

以上所述是小编给大家介绍的导出HTML5 Canvas图片并上传服务器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


这篇文章主要介绍了HTML5模拟齿轮动画的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学

这篇文章主要介绍了前端实现打印图像功能,需要的朋友可以参考下

这篇文章主要介绍了html5 canvas绘制网络字体的常用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

这篇文章主要介绍了使用Html5中的cavas画一面国旗的相关资料,需要的朋友可以参考下
下一篇:没有了

推荐阅读

免费h5模板素材_导出HTML5 Canvas图片并上传服务器

导出来HTML5 Canvas照片并提交网络服务器作用 公布 本文关键详细介绍了导出来HTML5 Canvas照片并提交网络服务器作用,原文中根据案例编码给大伙儿详细介绍了HTML5 Canvas转换成照片后提...

2020-12-25
阿里花上亿元购买平台疑似假货

阿里巴巴巴巴上年花了上亿人民币来给自己服务平台上的赝品付钱。 无需羡慕嫉妒,尽管疯狂购物是阿里巴巴假冒伪劣特职业队的工作中之一,但这只限于选购疑是赝品——阿里...

2020-12-24
浅谈2018年微商创业新趋势

2018早已来临,深圳市企业网站建设小熊利高新科技网编在此祝大伙儿新年开心的同时,也探讨下对新一年微商代理自主创业发展趋势的观点。 1、网上线下推广结合 消費升級,...

2020-12-24
网站建设过程中需要考虑哪些细节

根据如今的社会发展看来,倘若公司沒有一个真实的网站,那么就会失去许多潜在用户,因此说就现在互联网好阶段,基本建设一个合适的网站太重要。下边网编就来详尽的详细介绍下...

2020-12-24
广州网站建设公司分享:HTT凡科抠图认证的两三

不知道道大伙儿有木有听闻过htt凡科抠图验证呢? 估算从业企业网站建设、网络运营和seo优化的朋友都听闻过吧。终究这一物品,但是与大家密切相关的。 实际上,小莫也是以六月份...

2020-12-24
衢州企业网站建设

衢州公司企业网站建设写一个微信小程序需要多少钱_凡科微信小程序官方网站_手机微信微信小程序云开发设计_手机上微信小程序制作_做一个微信小程序需要多少钱...

2020-12-24
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信