对于我的项目,我需要将 Canvas 上显示的内容保存到数据库中。我现在非常熟悉 toDataURL()
函数,下面的代码(本质上只是一个测试)可以工作,显示图像两次。
var canvas = document.getElementById('canvas');
var image = new Image();
image.src = "03Jun15.jpg";
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
canvas.getContext("2d").drawImage(image, 0, 0);
var newcanvas = document.getElementById('newcanvas');
var img = new Image();
img.src = canvas.toDataURL("image/png");
var imageData = canvas.toDataURL("image/png");
newcanvas.width = img.naturalWidth;
newcanvas.height = img.naturalHeight;
newcanvas.getContext("2d").drawImage(img, 0, 0);
但是,当我尝试通过 Ajax 将 source
保存到 session 变量时,问题就出现了。下面的代码紧接在上面的代码之后,并且在 testcanvas
Canvas 上不显示任何内容。我想要发生的是将 $_SESSION['imageData']
设置为数据 URL,然后图像将再次显示,但这次使用 session 变量作为源。我从 session 变量中得到的是一个长字符串,它与原始的 source
变量非常相似,但显然与它不匹配(我已经做了一个快速的 if 语句来确认这一点)。
$.ajax({
url:"upload_image.php",
method:"POST",
data:{imageData:imageData}
});
var testcanvas = document.getElementById('testcanvas');
var newimage = new Image();
newimage.src = "<?php echo $_SESSION['imageData']; ?>";
var newsource = "<?php echo $_SESSION['imageData']; ?>";
testcanvas.width = newimage.naturalWidth;
testcanvas.height = newimage.naturalHeight;
testcanvas.getContext("2d").drawImage(newimage, 0, 0);
这是在 upload_image.php 上找到的内容:
session_start();
$_SESSION['imageData'] = $_POST['imageData'];
老实说,我不知道翻译中丢失了什么,有人可以帮忙吗?
最佳答案
为您找到了这个: https://gist.github.com/peterschmidler/2410299
The following code saves a canvas as png with ajax to php.
Javascript:
var canvasData = canvasElement.toDataURL("image/png"); $.ajax({ url:'save.php', type:'POST', data:{ data:canvasData } });
PHP:
$data = $_POST['data']; $data = substr($data,strpos($data,",")+1); $data = base64_decode($data); $file = 'output.png'; file_put_contents($file, $data); echo "Success!";
关于javascript - 通过 Ajax 在 PHP 中保存来自 Javascript 的数据 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48063558/