我正在做一个基于网络的ABC跟踪程序的项目。在我的程序中，我应该有一个保存按钮，可以将画布上的绘图转换成图像任何自动保存到数据库中的图像。我不知道怎么做。我可以将绘图转换成图像，但我不知道如何保存到数据库。
这是我的编码
HTML格式
<html>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC:700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Playball" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="cssdrawing.css">
<script src="a.js"></script>
<body>
<div style="background:A5F0FA;padding:10px;padding-bottom:20px">
<h1 style="font-family: 'Playfair Display SC', serif;text-align:center;margin-bottom:10px">Lets Trace!</h1>
<hr style="margin-bottom:15px;padding-top:0px;" width="500px" />
<center>
<div align="center" id="MainDiv" style="background:#FAA5EE;box-shadow:5px 5px 5px silver;padding:10px;max-width:90%;">
<canvas id="painter" height="300px" width="500" style="background: url('./images/vtr.jpg')"></canvas>
<br />
<div class="holder">
<span>Colors:</span>
<input type="button" style="background-color:FF0000;padding:10px 24px" onclick="Color('red')"></button>
<input type="button" style="background-color:0000FF;padding:10px 24px" onclick="Color('blue')"></button>
<input type="button" style="background-color:DE5616;padding:10px 24px" onclick="Color('brown')"></button>
<input type="button" style="background-color:FFFF00;padding:10px 24px" onclick="Color('yellow')"></button>
<input type="button" style="background-color:008000;padding:10px 24px" onclick="Color('green')"></button>
<input type="button" style="background-color:DE168F;padding:10px 24px" onclick="Color('pink')"></button>
<input id="color" type="color" onclick="Color(this.value)" onchange="Color(this.value)"></input>
<br /></div>
<div class="holder">
<span>Thickness:</span>
<input value="30" id="number" min="30" max="100" type="number"></input><br /></div>
<div class="holder">
<span>Other:</span>
<button onclick="Color('white')">Eraser</button>
<button onclick="ClearCanvas()">Clear Canvas</button>
<a id="download" download="img.jpg"><button type="button" onClick="download()">Save</button></a>
</div>
</div>
</center>
</div>
</body>
</html>
javascript
function Color(a) {
var offset = function(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
var canvas = document.getElementById("painter");
var context = canvas.getContext("2d");
var draw = false;
var pos = offset(canvas);
canvas.onmousemove = function(e) {
if (draw == false) { return; }
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
console.log(x,y);
context.lineTo(x, y);
context.stroke();
}
canvas.onmousedown = function(e) {
draw = true;
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
context.fillStyle = "red";
context.beginPath();
context.moveTo(x, y);
context.lineWidth= document.getElementById("number").value;
context.strokeStyle=a;
}
canvas.onmouseup = function(e) {
draw = false;
}
}
function ClearCanvas() {
var c=document.getElementById("painter");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,880,300);
}
function Preview() {
var canvas = document.getElementById("painter");
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "", "width=880, height=300");
}
function download(){
var download = document.getElementById("download");
var image = document.getElementById("painter").toDataURL("image/jpg")
.replace("image/jpg", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.jpg");
$.ajax({
method: 'POST',
url: 'photo_upload.php',
data: {
photo: photo
}
});
}
最佳答案
使用ajax post将数据url发送回服务器
$.ajax({
type: "POST",
url: "photo_upload.php",
data: {photo : dataUrl}
})
.done(function(respond){console.log("done: "+respond);})
.fail(function(respond){console.log("fail");})
.always(function(respond){console.log("always");})
在php端，将传入的dataurl保存到数据库：
<?php
$sql="insert into table_name(photo) values(:photo)";
// INSERT with named parameters
$conn = new PDO('mysql:host=localhost;dbname=myDB', "root", "myPassword");
$stmt = $conn->prepare($sql);
$stmt->bindValue(":photo",$_POST["photo"]);
$stmt->execute();
$affected_rows = $stmt->rowCount();
echo $affected_rows;
?>
关于javascript - 如何将 Canvas 保存到数据库，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47735760/