栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何将HTML5画布另存为服务器上的图像?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何将HTML5画布另存为服务器上的图像?

这是一个如何实现您所需要的示例:

1) 画点东西

<canvas id="myCanvas" width="578" height="200"></canvas><script>    var canvas = document.getElementById('myCanvas');    var context = canvas.getContext('2d');    // begin custom shape    context.beginPath();    context.moveTo(170, 80);    context.bezierCurveTo(130, 100, 130, 150, 230, 150);    context.bezierCurveTo(250, 180, 320, 180, 340, 150);    context.bezierCurveTo(420, 150, 420, 120, 390, 100);    context.bezierCurveTo(430, 40, 370, 30, 340, 50);    context.bezierCurveTo(320, 5, 250, 20, 250, 50);    context.bezierCurveTo(200, 5, 150, 20, 170, 80);    // complete custom shape    context.closePath();    context.lineWidth = 5;    context.fillStyle = '#8ED6FF';    context.fill();    context.strokeStyle = 'blue';    context.stroke();</script>

2) 将画布图像转换为URL格式(base64)

var dataURL = canvas.toDataURL();

3) 通过Ajax将其发送到您的服务器

$.ajax({  type: "POST",  url: "script.php",  data: {      imgbase64: dataURL  }}).done(function(o) {  console.log('saved');   // If you want the file to be visible in the browser   // - please modify the callback in javascript. All you  // need is to return the url to the file, you just saved   // and than put the image in your browser.});

3) 将base64作为图像保存在服务器上

这是在PHP中执行此操作的方法,每种语言都具有相同的想法:



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/517793.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号