как мы можем сохранить изображение html5 canvas в базу данных в php

Вы даете небольшую информацию, но вот краткий обзор процесса, который вам понадобится.

Полное описание того, как получить информацию о дизайне от клиента к вашей базе данных, выходит за рамки обсуждения Stackoverflow, но этот пример должен помочь вам начать работу с этими концепциями.

Преобразовать холст в файл imageUrl

Если вы хотите сохранить содержимое холста в качестве изображения, вы можете использовать canvas.toDataURL (), который возвращает DataURL в холсте в формате .png. Например:

 var canvas=document.getElementById("myCanvas"); var dataUrl=canvas.toDataURL(); 

Отправьте этот dataUrl обратно на сервер с поста 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("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; ?> 

С другой стороны …

С учетом всего сказанного может оказаться более полезным сохранить компоненты дизайна, созданные пользователем, а не образ этого дизайна.

Создайте объект javascript, содержащий конкретную информацию о дизайне:

 var item1={ product:"shirt", color:"#d59211", price:20, text:"Default Text", textX:243, textY:181 } 

Используйте JSON для преобразования этого объекта в строку

 var item1Json=JSON.stringify(item1); 

Затем опубликуйте полезные данные дизайна в своей базе данных вместо изображения.

Вы можете использовать HTML5 Canvas ' toDataURL() который согласно документам:

Возвращает данные: URL-адрес, содержащий представление изображения в формате, указанном типом (по умолчанию для PNG)

Он используется следующим образом:

 var canvas = document.getElementById('thecanvaselement'); // ...maybe some more canvas drawing operations here var url = canvas.toDataURL(); 

Результаты (сохраненные в переменной url ) затем могут быть отправлены обратно на сервер с использованием AJAX, а затем сохранены в вашей базе данных, как обычно.