导出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的新特性介绍
Oct 31 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
基于PHP静态类的原罪详解
2013/05/06 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php操作access数据库的方法详解
2017/02/22 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
js动态为代码着色显示行号
2013/05/29 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
js中this对象用法分析
2018/01/05 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
python2.7安装图文教程
2018/03/13 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
基于Pytorch SSD模型分析
2020/02/18 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
教师求职推荐信范文
2013/11/20 职场文书
出国导师推荐信
2014/01/16 职场文书
大学运动会通讯稿
2014/01/28 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
cf战队收人口号
2014/06/21 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
幼师大班个人总结
2015/02/13 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
Python函数式编程中itertools模块详解
2021/09/15 Python