如何在没有php、jquery的情况下将画布图像保存到mySQL

How to save canvas image to mySQL without php, jquery

本文关键字：布图像 图像 mySQL 保存 情况下 php jquery      更新时间：2023-09-26

最近我开始使用画布，并成功地使用不同的颜色和大小在图像上绘制线条，最后使用dataUrl保存。现在我需要将此映像保存到mySQL数据库中。通过上网。。。，对我发现了很多能完成这项工作的代码；但是使用php和jquery。说真的，我不知道他们两个的ABCD。是否有任何方法可以在不使用php和jquery的情况下将图像保存到mySQL数据库中。在这里我粘贴我的代码，我正在使用它来注释图像并将其保存为图像。

<%@ 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>

它运行良好。我只是粘贴代码作为参考。这里还有一个"文本区域"，也需要保存在mySQL中。提前感谢

对不起，我忍不住了：你可以使用另一个客户端库来代替jQuery（如Prototype、YUI、MooTools、Undercore等），也可以使用ASP、JSP、ColdFusion等服务器端语言PHP

实际上你甚至可以同时做

  • 客户端（您不需要在客户端上使用jQuery，事实上您现在没有使用它）
  • 和服务器端（使用node.js）

纯javascript。

但你真正想做的（跳过学习服务器端语言和SQL）可能是不支持（我写可能是，因为……嗯……几乎所有事情都是可能的……如果你能编码的话）。

从更现实的角度来看：
默认情况下，大多数主机都支持PHP/MMySQL组合。。找到一个"常规"、"经济高效"的主机和一个"简单"的迁移计划（到几乎任何其他普通主机），我强烈建议你咬紧牙关，开始玩PHP和一些SQL。

找到了一种将画布保存为图像的方法，而无需使用php。我在jsp中获得了画布，然后我使用Ajax将imageData发送到一个java类。

var ajax = new XMLHttpRequest();
ajax.open("POST","upload",false);
ajax.send(canvasData);

在操作文件（我使用的是struts2）中接收到作为字节数组的图像，然后代码如下

HttpServletRequest req=null;
StringBuffer buffer = new StringBuffer();
try{
    Reader reader = req.getReader(); 
    int current;
    while((current = reader.read()) >= 0) {
        buffer.append((char) current);
}
}catch(IOException ioe){
    ioe.printStackTrace();
}
String data = new String(buffer); 
data = data.substring(data.indexOf(",") + 1); 
File outputImage = new File("Sairam.jpg");
FileOutputStream outputStream = new FileOutputStream(outputImage); 
try {
    outputStream.write(new BASE64Decoder().decodeBuffer(data));
    outputStream.flush();
    outputStream.close();
} catch (IOException e) {           
    e.printStackTrace();
}

这很好，我在将图像保存到数据库后发布了这篇文章，我也能够成功检索保存的图像。

相关文章：