Question

我正在做一个基于web的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
  }
});
    }

Answer 1

使用AJAX帖子将dataUrl发送回您的服务器

import tkinter

#creates box
window =tkinter.Tk()

window.geometry("%dx%d+%d+%d" % (330, 80, 200, 150))
window.title("Breeds and Characteristics")

#data
data={
    'Abyssinian':"Aloof,Intelligent,Diseased",
    'American-Bobtail':"Affectionate,Intelligent,Diseased",
    'American-Curl':"Affectionate,Dull,Healthy",
    }

#updates text
def boxtext(new_value):
    display.config(text = data[new_value])

#create a dropdown list
var = tkinter.StringVar()
var.set('Abyssinian')
p = tkinter.OptionMenu(window, var, *data, command=boxtext)
p.pack()

display = tkinter.Label(window)
display.pack()

window.mainloop()

在PHP端，将传入的dataURL保存到数据库：

$.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");})

如何将画布保存到数据库中

1 个答案: