Недавно я начал использовать холст и был успешным в рисовании линий на изображении с использованием разных цветов, размеров и, наконец, сохранить его с помощью dataUrl. Теперь мне нужно сохранить этот образ в базе данных mySQL. По серфингу в Интернете ..., да; Я нашел много кода, который выполняет эту работу; но с использованием php и jquery. Серьезно, я не знаю ABCD о них обоих. Есть ли способ сохранить изображение в базе данных mySQL без использования php и jquery. Здесь я вставляю свой код, который я использую для аннотирования изображения и сохранения его как изображения.Как сохранить изображение холста на mySQL без php, jquery
<%@ taglib uri="/struts-tags" prefix="s" %>
<html>
<head>
<title>Success: Upload User Image</title>
<style>
#myCanvas { background:url("images/<s:property value="userImageFileName"/>") ;
background-size: 100% 100%;
background-repeat: no-repeat;}
</style>
</head>
<body>
<img id="result" src="images/<s:property value="userImageFileName"/>" hidden="true" width="565" height="584" class="annotatable"/>
<canvas id="myCanvas" width="565" height="584" style="border:1px solid #d3d3d3;">Please use a modern browser like Firefox, Chrome, Safari</canvas>
<textarea rows="10" cols="100">
Write your feed back with respect to colors you used to draw on image
</textarea>
<form>
<select name='color' onChange="split()">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
<option>White</option>
</select>
<select name='tool' onChange="split()">
<option value='1'>Pen</option>
<option value='5'>Sketch</option>
</select>
</form>
<input type="button" value="draw" onClick="draw()">
<input type="button" value="eraser" onClick="erase()">
<input type="submit" value="save" onClick="save()">
<br>
<canvas id="canvas2" width="565" height="584" hidden="true"></canvas>
<img id="canvasImg" alt="No annotated image found">
<script>
var canvas = document.getElementById('myCanvas');
var coord = document.getElementById('coord');
var context = canvas.getContext('2d');
var color;
var select = document.forms[0].color;
select.onchange = function(){
color = select.options[select.selectedIndex].text;
context.strokeStyle = color;
};
var select2 = document.forms[0].tool;
select2.onchange = function(){
tool = select2.options[select2.selectedIndex].value;
context.lineWidth = tool;
};
function draw(){
operate("draw");
}
function erase(){
operate("erase");
}
function operate(mode)
{
var mousedown = false;
color = select.options[select.selectedIndex].text;
context.strokeStyle = color;
tool = select2.options[select2.selectedIndex].value;
context.lineWidth = tool;
canvas.onmousedown = function(e) {
var pos = fixPosition(e, canvas);
mousedown = true;
context.beginPath();
context.moveTo(pos.x, pos.y);
//return false;
};
canvas.onmousemove = function(e) {
var pos = fixPosition(e, canvas);
if (mousedown) {
if(mode=="draw"){
context.lineTo(pos.x, pos.y);
context.stroke();
}
if(mode=="erase"){
context.clearRect(pos.x,pos.y,10,10);
};
};
};
canvas.onmouseup = function(e) {
mousedown = false;
};
function fixPosition(e, gCanvasElement) {
var x;
var y;
x = e.pageX;
y = e.pageY;
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
return {x:x, y:y};
};
};
function save(){
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
var img=document.getElementById("result");
context2.drawImage(img, 0, 0, 565, 584);
context2.drawImage(canvas, 0, 0);
var dataURL = canvas2.toDataURL();
document.getElementById('canvasImg').src = dataURL;
};
</script>
</body>
</html>
Он отлично работает. Я просто вставляю код для справки. Также здесь у меня есть «textarea», который также необходимо сохранить в mySQL. Заранее благодарю
Вам понадобится какой-то механизм транспорта между вашим браузером и вашим сервером. В общем случае (JavaScript, а не JQuery) вы можете использовать 'XMLHttpRequest', о котором вы можете узнать больше здесь: http://en.wikipedia.org/wiki/XMLHttpRequest. После того, как на вашем сервере есть '.toDataURL', обязательно удалите индикатор ведущего типа из строки dataURL (все до первой запятой). Вы не указываете свой тип сервера, но затем просто используйте язык сценариев своего сервера, чтобы сохранить лишенную строку dataURL в MySQL. Ура! – markE