CODEWITHSUNDEEP
javascriptmysqlhtmlcanvas
Pawan
Pawan

Reputation: 443

How to save canvas image to mySQL without php, jquery

Recently I started using canvas and was successful in drawing lines on a image using different colours, sizes and finally save it using dataUrl. Now I need to save this image into mySQL database. By surfing internet..., yes; I found lot of code which does this work; but using php and jquery. Seriously, I don't know ABCD of both of them. Is there any way to save the image into mySQL database without using php and jquery. Here I paste my code which I am using for annotating the image and saving it as image.

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

It is working fine. I am just pasting code for a reference. Also here I am having a 'textarea' which is also needed to be saved in mySQL. Thankyou in advance

Upvotes: 1

Views: 1571

Answers (2)

Pawan
Pawan

Reputation: 443

Found a way to save a canvas as an image without using php. I got the canvas in a jsp and then I used Ajax to send the imageData to a java class.

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

Received the image as a byte array in action file (I am using struts2) and then the code is as follows

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();
}

This is working fine and I am posting this after saving the image into database and also i am able to retrieve the saved image successfully.

Upvotes: 0

GitaarLAB
GitaarLAB

Reputation: 14665

I'm sorry, can't help myself: you can use another client-side library instead of jQuery (like Prototype, YUI, MooTools, Underscore etc. etc. etc.) and instead of the server-side language PHP you could use ASP, JSP, ColdFusion etc. etc. etc. (I am trying to make a point with this tough..)

Actually you could even do both

  • client (you don't need jQuery on the client-side for this, in fact you're not using it now)
  • and server-side (using node.js)

in pure javascript.

But what you really want to do (skipping learning a server-side language and SQL) is probably nowhere supported (I wrote probably because.. well.. almost everything is possible.. if you (can) code it).

From a more realistic real-world point-of-view:
Most hosts will support the PHP/MySQL combo by default.. Finding a 'regular' and 'cost-effective' host and an 'easy' migration plan (to just about any other average host), I'd highly recommend just biting the bullet and start toying with PHP and some SQL.

Upvotes: 1

Related Questions