html5 canvas在线生成图片后怎么样保存到数据库(服务器端)而不是本地?

html5 canvas在线生成图片后怎么样保存到数据库(服务器端)而不是本地?,第1张

canvas画布保存为:

function convertCanvasToImage(canvas) {
  var image = new Image();
  imagesrc = canvastoDataURL("image/png");
  return image;

canvas参数为你的canvas对象,返回一个对象,你可以将这个image放到网页结构中,如果要保存图像,可以将canvastoDataURL("image/png")返回的base64格式的数据放到input(type=hidden)中,用户点击上传按钮(或设置表单自动提交),将base64格式的数据上传

形如:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVDhPY8AFMvJL/oMwlEs8yMgvJVcjyMbSYaERogCC0/OAGIkPwaVQMUhgQWiggWANIAzUhKoBpgjdMIhBUHsxAdxkUgHMBiiXeDAQNkICAsolHuC3kYEBAG/wdxC2W2tUAAAAAElFTkSuQmCC

服务器端接收到字符串(以上字符串可以直接在浏览器中打开,IE低版本就算了,能用canvas的浏览器都可以)后根据data:image/png得知应该保存的文件类型扩展名(png),然后将base64,后面的base64编码字符串解码(后端语言实现,如PHP用base64_decode()函数),将解码后的二进制数据以二进制的形式保存到服务器上(形式)

如果存数据库,可以直接存base64编码,读取时候解码也行,建议以文件形式存储,数据库不适合存大文件

1月24日
14:25
没有问题,可以使用Photoshop,
或是Windows自带的画图也可以。
在Photoshop中打开,再新建一个空白文件,用左侧工具栏的
移动工具
,把所有的都拖进这个
空白文档
中,变换大小尺寸,移动排好合适位置,之后另存
JPEG格式
,注意文件的总大小,不要超过规定上传的文件大小(
百度知道
不要超过200K)。
画图,打开画图建新文件——编辑——粘贴来源,在目录中找到你的,双击打开,改变尺寸大小,移动位置,再重复——编辑——粘贴来源,这样一个一个把你的图像粘贴进来,排好位置和大小后,就可以保存了。
祝你好运
揪错


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/13428331.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-08-03
下一篇 2023-08-03

发表评论

登录后才能评论

评论列表(0条)

保存