用PHP将网页上的Canvas图像保存到服务器上的方法

最新推荐文章于 2025-05-15 09:28:47 发布

rorntuck7

最新推荐文章于 2025-05-15 09:28:47 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP

本文链接：https://blog.youkuaiyun.com/rorntuck7/article/details/51321809

PHP 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何使用PHP配合前端Canvas技术，将网页上绘制的Canvas图像保存到服务器的详细步骤，包括数据转换和文件上传的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>HTML5</title>
<script type="text/javascript" charset = "utf-8"> 
//这个函数将在页面完全加载后调用 
function pageLoaded() 
{ 
//获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同 
var canvas = document.getElementById('tCanvas'); 
//获取该canvas的2D绘图环境 
var context = canvas.getContext('2d'); 
//获取图片对象的引用 
var image = document.getElementById('tkjpg'); 
//在(0,50)处绘制图片 
context.drawImage(image,0,50); 
//缩小图片至原来的一半大小 

context.fillStyle='#FF0000';
context.fillRect(150,150,100,100);

//var image = new Image();
//image.src = canvas.toDataURL("image/png");
var image = document.getElementById('tkjpg2'); 
image.src = canvas.toDataURL("image/png");

document.getElementById("imgs").value=canvas.toDataURL("image/png");
} 
</script>
</head>
<body onload="pageLoaded();">
<p></p>
<img src = "3.jpg" id = "tkjpg" width="300" height="100">
<p></p>
<img   id = "tkjpg2">
<canvas width = "800" height = "500" id = "tCanvas" style = "border:black 1px solid;"> </canvas>
<form id="formid"  name= "myform" method = 'post'  action = '1.php'  >
  <input name="img" type="hidden" id="imgs">
  <input type="submit" name="sub" value="提交"/>
</form>
</body>
</html>

服务端

<?php

define('UPLOAD_DIR', 'images/');
	$img = $_POST['img'];
	$img = str_replace('data:image/png;base64,', '', $img);
	$img = str_replace(' ', '+', $img);
	$data = base64_decode($img);
	$file = UPLOAD_DIR . uniqid() . '.png';
	$success = file_put_contents($file, $data);
	print $success ? $file : 'Unable to save the file.';
?>

从网页上传到服务器端的图片是base64_encode转码过的Data URL格式，数据在服务器端用base64_decode进行解码，保存成文件。