Make capture with html2canvas and save it on a server

Question

Make capture with html2canvas and save it on a server

Navigation

#1 by (1 votes)

0

I see that with this library we can print the resulting image somewhere in the DOM or even download it, but is there any way to store it on a server?

Thank you very much!

html canvas ajax server

asked by Adrià Fàbrega 14.06.2018 в 23:03

source

1 answer

I can not access phpMyAdmin what is the difference between a class and a structure

score 1 · Answer 1

I do it like that

I have my canvas

<canvas id="drawingCanvas" width="800" height="600" style="cursor: text;">Canvas not supported</canvas>

later with js I locate it

drawingCanvas = document.getElementById('drawingCanvas')

I get the canvas image like this

 var data = drawingCanvas.toDataURL('image/png');

and in my case with js I invoke a post method of a page in c # by ajax and I send it to you with "data"

$.ajax({
    type: "POST",
    async:true,
    url: 'webservice.aspx',
    data: {'data': dat},
    success: function (data) {
        return data.d;
    }
});

and already in my code of c # I pick up the variable and tranformo in base64 and then to an image file and I save it in a specific path

string data = !string.IsNullOrEmpty(Request.Form["data"]) ? Request.Form["data"] : "";
    if (data != "")
    {
        Base64ToImage(data);
    }

public System.Drawing.Image Base64ToImage(string base64String)
{
    string subPath = Session["id"].ToString(); 
    bool exists = System.IO.Directory.Exists(HttpContext.Current.Server.MapPath("~/Temporales/" + subPath));
    if (!exists)
        System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/Temporales/" + subPath));

    string base64 = base64String.Substring(base64String.IndexOf(',') + 1);
    byte[] data = Convert.FromBase64String(base64);
    using (MemoryStream ms = new MemoryStream(data, 0, data.Length))
    {
        ms.Write(data, 0, data.Length);
        ms.Seek(0, SeekOrigin.Begin);

        Bitmap bm = new Bitmap(ms);
        String saveImagePath = HttpContext.Current.Server.MapPath("~/Temporales/" + Session["id"] +"/");
        string diagonal = "/";
        string nombreImg = Session["IdReg"] + "_Imagen_" + DateTime.Now.ToString("dd-mm-yy") + ".jpg";
        bm.Save(saveImagePath + diagonal + nombreImg);



        return bm;
    }
}

This is how I do it, I hope some of this will help you. Greetings