html上传图片数据到服务器,php接收保存图片

php中文网
发布: 2016-08-08 09:26:35
原创
1742人浏览过


登录后复制
登录后复制
很多时候,我们需要把web端的图片数据或者canvas里面的画面保存到服务器上。html5已经提供了可用的接口。


Canvas的toDataURL方法,可以将canvas上的画布数据导出成字符串格式。我们只需要再把字符串传输给服务器就可以了。

如果图片是img标签的,怎么办呢?

很简单,canvas提供了drawImage方法,用于把img或者其他canvas的数据画到自己的画布上。

下面,我们看看客户端的代码:

var cc = window.document.getElementById("egretCanvas");
var cc2 = document.createElement("canvas");
cc2.setAttribute("width", "320");
cc2.setAttribute("height", "514");
var ctx = cc2.getContext("2d");
ctx.drawImage(cc, 0, 0, 320, 514);
登录后复制
var imgdata: string = cc2["toDataURL"]();
登录后复制


这样导出后的字符串,含有前缀“data:image/png;base64,”,所以我们需要把这个前缀去掉

imgdata = imgdata.substring(22); 
登录后复制

然后把字符串传给服务器,这里我们选择使用php语言来接收数据并保存图片。


$imgurl = str_replace(' ', '+', $_REQUEST['image']);
登录后复制
先把字符串中的空格替换成"+"号。


$savePath = "../images/123.png";
$image = base64_decode($image);
file_put_contents($savePath,$image);
登录后复制

php拿到数据后,需要进行base64解码,才能保存成图片。



以上就介绍了html上传图片数据到服务器,php接收保存图片,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号