关于如何把canvas中的内容转换为图片上传到服务器的操作过程

最新推荐文章于 2023-12-08 17:07:20 发布

issac_xiao

最新推荐文章于 2023-12-08 17:07:20 发布

阅读量6.1k

点赞数 1

分类专栏：平常的技术摘要

本文链接：https://blog.csdn.net/issac_xiao/article/details/11853557

版权

平常的技术摘要专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在参与一个项目，项目的要求是可以在canvas内随便涂鸦，但是需要把涂鸦的结果通过接口转换为图片，然后上传服务器。本人一直对这方面不太熟悉，今天参考了一些网上资料，做了一个简单的demo. 具体来说，分两个部分，第一个部分是HTML和js部分，另外一个部分是服务器php部分。（特别说明的是，如果想使用php服务器部分，建议下载wamp5下载安装，配置好php的环境，具体过程可以参见，www.php100.com,的第一课）。

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<div><img id="myimage"></img></div>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
var imageData =  canvas.toDataURL('image/png');
document.getElementById('myimage').src = imageData;
alert(imageData);
var data=imageData.substr(22);  
alert(data);

$.post('test.php',{ 'data' : data},function(data)
{alert(data);} );

</script>

</body>
</html>

以上代码是，构建一个简单的canvas然后通过jquery的$.post函数把图片的数据部分传送到服务器。遇到的问题，是当时第一个，通过

canvas.toDataURL('image/png');得到的数据部分是类似于“data:image/png;base64,xxxxx”的格式，但是真正的图像部分是base64,之后的内容，所以选择使用substr(22)
另外就是 &.post('test.php',{'data':data},function(data)),其中'data'是key,而data是值。
<?php
$data = $_POST['data'];
$encodedData = str_replace(' ','+',$data);
$image=base64_decode($encodedData);  
$filename = 'D:\wamp\www\test.png';  
    $fp = fopen($filename, 'w');
    fwrite($fp, $image);
    fclose($fp);
?>

这里要注意的有几个点：第一

$encodedData = str_replace(' ','+',$data);

这个部分必须要，否则转换的时候老是出错，其次就是

$image=base64_decode($encodedData);

这个编码转换也是必须的，因为图像部分的数据，是另外一种编码格式

$filename = 'D:\wamp\www\test.png';

上传文件的地址

issac_xiao

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
关于如何把canvas中的内容转换为图片上传到服务器的操作过程

在参与一个项目，项目的要求是可以在canvas内随便涂鸦，但是需要把涂鸦的结果通过接口转换为图片，然后上传服务器。本人一直对这方面不太熟悉，今天参考了一些网上资料，做了一个简单的demo. 具体来说，分两个部分，第一个部分是HTML和js部分，另外一个部分是服务器php部分。（特别说明的是，如果想使用php服务器部分，建议下载wamp5下载安装，配置好php的环境，具体过程可以参见，www.php
复制链接

扫一扫

专栏目录