canvas获取base64图片并上传php服务器

最新推荐文章于 2024-07-22 18:18:11 发布

韭零后程序猿

最新推荐文章于 2024-07-22 18:18:11 发布

阅读量4.7k

点赞数

分类专栏：服务器 javascript canvas 文章标签： canvas php 服务器 base64 图片

本文链接：https://blog.csdn.net/qq_34627459/article/details/72869262

版权

本文介绍了如何通过canvas将图片转换为base64数据，并上传到PHP服务器的详细步骤。首先在前端将图片渲染到canvas，然后利用toDataUrl()方法获取base64编码，接着将数据发送到后台。在PHP后台，去除base64字符串的文件头信息，使用base64_decode()解码并用file_put_contents()保存为文件。注意检查服务器目录的写权限，以防无法保存文件。

摘要由CSDN通过智能技术生成

思路

将图片渲染到canvas
使用canvas的toDataUrl()方法获取bse64文件数据
将数据和文件名发送到服务端
服务端收到数据去掉”’,”前面的文件头信息
使用base64_decode()解码
使用file_put_contents()保存文件

前端

var canvas = $("canvas");
var cxt = canvas[0].getContext('2d');
var img = new Image();
img.src = "xxxxxx";
cxt.drawImage(img,0,0,300,300);
//获取base64数据并上传
var base64Img = canvas[