我们如何保存html5 canvas图像到数据库在php [英] how can we save html5 canvas image to database in php

问题描述

我为电子商务网站创建产品设计页...
我需要将设计的图像从客户端保存到数据库....
我试图保存，但它could'nt保存...和html5画布是我的新...

我的html代码..
............ .......

 < div id =clothing-designer> 
< div class =fpd-producttitle =Shirt Frontdata-thumbnail =images / yellow_shirt / front / preview.png> 
< img src =./ images / yellow_shirt / front / base.pngtitle =Base Frontdata-parameters ='{x：123，y：81，colors ＃d59211，price：20}'/> 
< img src =./ images / yellow_shirt / front / body.pngtitle =Hightlightsdata-parameters ='{x：249，y：80} 
< img src =./ images / yellow_shirt / front / shadows.pngtitle =Shadowdata-parameters ='{x：123，y：81}'/> 
< span title =Any Textdata-parameters ='{x：243，y：181，removable：true，draggable：true，rotational：true， resizable：true，colors：＃000000}'>默认文本< / span> 
< div class =fpd-producttitle =Shirt Backdata-thumbnail =images / yellow_shirt / back / preview.png> 
< img src =./ images / yellow_shirt / back / base.pngtitle =Base Backdata-parameters ='{x：123，y：81，colors ＃d59211，price：20}'/> 
< img src =./ images / yellow_shirt / back / body.pngtitle =Hightlightsdata-parameters ='{x：277，y：79} 
< img src =./ images / yellow_shirt / back / shadows.pngtitle =Shadowdata-parameters ='{x：123，y：81}'/> 
< / div> 
< / div> 
  

解决方案

如何从客户端到数据库获取设计信息的完整描述超出了Stackoverflow讨论的范围，但这个例子应该

$ b

将画布转换为imageUrl

>如果要将画布内容保存为图像，可以使用canvas.toDataURL（），它以.png格式返回画布的DataURL。例如：

  var canvas = document.getElementById（myCanvas）; 
 var dataUrl = canvas.toDataURL（）; 
  

使用AJAX帖子将该数据发送回您的服务器 >

  $。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）;}）
  
 
 
 
 在PHP端，将传入的dataURL保存到数据库： 
 <？php 
 
 if（！isset（$ _ POST [code]））{
 die帖子是空的。 
} 
 
 $ sql =insert into designs（image）values（：image）; 
 
 //使用命名参数插入
 $ 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; 
 
？> 
  
 或者...  
 
 
 
有了这一切，可能更有用的是保存设计的用户创建的组件，而不是该设计的图像。 
 
 
 
创建一个包含设计的具体信息的javascript对象：
  var item1 = {
 product：shirt，
 color：＃d59211，
 price：20，
 text：Default Text，
 textX ：243，
 textY：181 
} 
  
使用JSON转换该物件成一个字符串
  var item1Json = JSON.stringify（item1）; 
  
然后将有用的设计数据发送到数据库，而不是映像。
 
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...

My html code..
...................
<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>

解决方案
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.

Convert the canvas to an 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:
var canvas=document.getElementById("myCanvas");
var dataUrl=canvas.toDataURL();
Send that dataUrl back to your server with an AJAX post
$.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

    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:
var item1={
    product:"shirt",
    color:"#d59211",
    price:20,
    text:"Default Text",
    textX:243,
    textY:181
}
Use JSON to convert that object into a string 
var item1Json=JSON.stringify(item1);
Then post that useful design data to your database instead of the image.

                        
这篇关于我们如何保存html5 canvas图像到数据库在php的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！