HTML5 – Salvar imagem do Canvas com jQuery e C#

Recentemente estava estudando um pouco sobre HTML 5 especificamente com o Canvas, após gerar uma imagem com base em um texto digitado pensei em salvar a imagem em disco usando C# com Base64.Canvas.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="canvas.aspx.cs" Inherits="canvas" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Exemplo de canvas</title>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-1.8.1.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2FJavascript%22%3E%0A%20%20%20%20%20%20%20%20function%20desenhar()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FCanvas%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20canvas%20%3D%20document.getElementById(%22myCanvas%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fcontexto%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20context%20%3D%20canvas.getContext(%222d%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Flimpar%20o%20contexto%0A%20%20%20%20%20%20%20%20%20%20%20%20context.clearRect(0%2C%200%2C%20canvas.width%2C%20canvas.height)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FDefinir%20fonte%20e%20tamanho%0A%20%20%20%20%20%20%20%20%20%20%20%20context.font%20%3D%20%2218px%20Arial%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FEscrever%20no%20canvas%20o%20texto%20que%20foi%20digitado%20no%20input%20txtNome%0A%20%20%20%20%20%20%20%20%20%20%20%20context.fillText(document.getElementById(%22txtNome%22).value%2C%2010%2C%2050)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20function%20salvar()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20dados%20%3D%20%7B%7D%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FUtilizar%20o%20toDataURL%20para%20converter%20em%20Base64%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20base64%20%3D%20document.getElementById(%22myCanvas%22).toDataURL(%22image%2Fpng%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FRemover%20os%20caracteres%20que%20s%C3%A3o%20adionados%20por%20pad%C3%A3o%20antes%20do%20Base64%20da%20imagem%20(data%3Aimage%2Fpng%3Bbase64%2C).%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FPois%20s%C3%B3%20depois%20disso%20vem%20o%20Base64%20que%20precisamos%20salvar.%0A%20%20%20%20%20%20%20%20%20%20%20%20dados.base64%20%3D%20base64.substr(base64.indexOf('%2C')%20%2B%201%2C%20base64.length)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FBase64%20original%3Adata%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAfQAAABQCAYAAADvLIfGAAAH9ElEQVR4nO...%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FBase64%20correta%3AiVBORw0KGgoAAAANSUhEUgAAAfQAAABQCAYAAADvLIfGAAAH9ElEQVR4nO...%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'POST'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FChamar%20o%20webmethod%20SalvarImagem%20em%20webservice.asmx%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20%22webservice.asmx%2FSalvarImagem%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentType%3A%20'application%2Fjson%3B%20charset%3Dutf-8'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dataType%3A%20'json'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fenviar%20o%20base64%20como%20par%C3%A2metro%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20JSON.stringify(dados)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function%20(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(data.d)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2C%20error%3A%20function%20(xmlHttpRequest%2C%20status%2C%20err)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22Ocorreu%20o%20seguinte%20erro%3A%22%20%2B%20xmlHttpRequest.responseText)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>
    
<form id="form1" runat="server">

<div>
            Canvas
        </div>


<div>
            <canvas id="myCanvas" width="500" height="80" style="border: 1px solid #ddd;"></canvas>
        </div>


<div><input placeholder="Digite o nome" style="width:496px" onkeyup="desenhar()" type="text" id="txtNome" /></div>


<div><input type="button" onclick="salvar()" value="Salvar" /></div>

    </form>

</body>
</html>

webservice.cs

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () { }

    [WebMethod()]
    public string SalvarImagem(string base64)
    {
        //MemoryStream com o base64 recebido por parâmetro
        using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(base64)))
        {
            //Criar um novo Bitmap baseado na MemoryStream
            using (Bitmap bmp = new Bitmap(ms))
            {
                //Local onde vamos salvar a imagem (raiz do site + /canvas.png)
                string path = Server.MapPath("~/canvas.png");

                //Salvar a imagem no formato PNG
                bmp.Save(path, ImageFormat.Png);
            }
        }

        return "Imagem foi salva com sucesso";
    }
    
}

HTML5 – Salvar imagem do Canvas com jQuery e C#

Deixe um comentário Cancelar resposta

Post Navigation