javascript 我们如何在 php 中将 html5 画布图像保存到数据库中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24575090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can we save html5 canvas image to database in php
提问by user3805576
I m creating product design page for e-commerce web site... I need to save designed image from client side to database.... I tried to save but it could'nt save...and html5 canvas is new for me...
我正在为电子商务网站创建产品设计页面......我需要将设计的图像从客户端保存到数据库......我试图保存但它无法保存......而且 html5 canvas 对我来说是新的...
My html code.. ...................
我的 html 代码......................
<div id="clothing-designer">
<div class="fpd-product" title="Shirt Front" data-thumbnail="images/yellow_shirt/front/preview.png">
<img src="./images/yellow_shirt/front/base.png" title="Base Front" data-parameters='{"x": 123, "y": 81, "colors": "#d59211", "price": 20}' />
<img src="./images/yellow_shirt/front/body.png" title="Hightlights" data-parameters='{"x": 249, "y": 80}' />
<img src="./images/yellow_shirt/front/shadows.png" title="Shadow" data-parameters='{"x": 123, "y": 81}' />
<span title="Any Text" data-parameters='{"x": 243, "y": 181, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000"}'>Default Text</span>
<div class="fpd-product" title="Shirt Back" data-thumbnail="images/yellow_shirt/back/preview.png">
<img src="./images/yellow_shirt/back/base.png" title="Base Back" data-parameters='{"x": 123, "y": 81, "colors": "#d59211", "price": 20}' />
<img src="./images/yellow_shirt/back/body.png" title="Hightlights" data-parameters='{"x": 277, "y": 79}' />
<img src="./images/yellow_shirt/back/shadows.png" title="Shadow" data-parameters='{"x": 123, "y": 81}' />
</div>
</div>
回答by markE
You give little info, but here is a brief overview of the process you will need.
您提供的信息很少，但这里是您需要的流程的简要概述。
A full description of how to get design info from the client to your database is beyond the scope of a Stackoverflow discussion, but this example should get you started with the concepts involved.
关于如何从客户端获取设计信息到你的数据库的完整描述超出了 Stackoverflow 讨论的范围，但这个例子应该让你开始了解所涉及的概念。
Convert the canvas to an imageUrl
将画布转换为 imageUrl
If you want to save the canvas content as an image you can use canvas.toDataURL() which returns a DataURL of the canvas in .png format. For example:
如果要将画布内容另存为图像，可以使用 canvas.toDataURL() 以 .png 格式返回画布的 DataURL。例如：
var canvas=document.getElementById("myCanvas");
var dataUrl=canvas.toDataURL();
Send that dataUrl back to your server with an AJAX post
使用 AJAX 帖子将该 dataUrl 发送回您的服务器
$.ajax({
type: "POST",
url: "http://localhost/saveCanvasDataUrl.php",
data: {image: dataUrl}
})
.done(function(respond){console.log("done: "+respond);})
.fail(function(respond){console.log("fail");})
.always(function(respond){console.log("always");})
On the PHP side, save the incoming dataURL to a database:
在 PHP 端，将传入的 dataURL 保存到数据库中：
<?php
if(!isset($_POST["code"])){
die("Post was empty.");
}
$sql="insert into designs(image) values(:image)";
// INSERT with named parameters
$conn = new PDO('mysql:host=localhost;dbname=myDB', "root", "myPassword");
$stmt = $conn->prepare($sql);
$stmt->bindValue(":image",$_POST["image"]);
$stmt->execute();
$affected_rows = $stmt->rowCount();
echo $affected_rows;
?>
Alternatively...
或者...
With this all said, it might be more useful to save the components of the design that the user created rather than an image of that design.
综上所述，保存用户创建的设计组件而不是该设计的图像可能更有用。
Create a javascript object containing the specific info about the design:
创建一个包含有关设计的特定信息的 javascript 对象：
var item1={
product:"shirt",
color:"#d59211",
price:20,
text:"Default Text",
textX:243,
textY:181
}
Use JSON to convert that object into a string
使用 JSON 将该对象转换为字符串
var item1Json=JSON.stringify(item1);
Then post that useful design data to your database instead of the image.
然后将有用的设计数据而不是图像发布到您的数据库中。
回答by Arnelle Balane
You can use HTML5 Canvas' toDataURL()which according to the docs:
您可以使用 HTML5 Canvas'toDataURL()根据文档：
Returns a data: URL containing a representation of the image in the format specified by type (defaults to PNG)
返回一个数据： URL 包含按类型指定的格式的图像表示（默认为 PNG）
It is used like this:
它是这样使用的：
var canvas = document.getElementById('thecanvaselement');
// ...maybe some more canvas drawing operations here
var url = canvas.toDataURL();
The results (stored in the urlvariable) can then be sent back to the server using AJAX and then saved to your database like you would normally do.
结果（存储在url变量中）然后可以使用 AJAX 发送回服务器，然后像往常一样保存到数据库中。
