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


Posted in HTML / CSS onAugust 16, 2019

导出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 .

参考: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server

总结

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

HTML / CSS 相关文章推荐
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
CSS3 开发工具收集
Apr 17 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 #HTML / CSS
HTML5实现视频弹幕功能
Aug 09 #HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 #HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 #HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 #HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 #HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 #HTML / CSS
You might like
smarty模板数学运算示例
2016/12/11 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
Javascript模板技术
2007/04/27 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
JavaScript引用类型Array实例分析
2018/07/24 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
分厂厂长岗位职责
2013/12/29 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
Python各协议下socket黏包问题原理
2022/04/12 Python
Win11 BitLocker 驱动器加密
2022/04/19 数码科技