HTML5 - Salvar imagem do Canvas com jQuery e C#


por
Cesar Cassiano Schimanco
Já avaliou este artigo?
HTML5 - Salvar imagem do Canvas com jQuery e C# Avaliação 5/5 - 2 votos.

Objetivo do artigo: escrever um texto no canvas e salvar a imagem no servidor.
HTML5 + canvas + JavaScript + web service + C# é o que será utilizado para desenhar e salvar uma imagem no servidor.

O exemplo é simples, contém apenas um campo para digitar o texto e um botão para salvar a imagem (download do projeto no final do artigo).

Fluxo:
A imagem será desenhada no canvas enquanto o texto é digitado.
Ao clicar em salvar, a função toDataURL vai gerar uma string Base64 a partir do canvas.
Via ajax a string Base64 será enviada para o web service.
O web service (C#) transformará a string Base64 em imagem novamente e a salvará no servidor.
 

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>
    <script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
    <script type="text/Javascript">
        function desenhar() {
            //Canvas
            var canvas = document.getElementById("myCanvas");
            //contexto
            var context = canvas.getContext("2d");
            //limpar o contexto
            context.clearRect(0, 0, canvas.width, canvas.height);
            //Definir fonte e tamanho
            context.font = "18px Arial";
            //Escrever no canvas o texto que foi digitado no input txtNome
            context.fillText(document.getElementById("txtNome").value, 10, 50);
        }
        function salvar() {
            var dados = {};

            //Utilizar o toDataURL para converter em Base64
            var base64 = document.getElementById("myCanvas").toDataURL("image/png");
            //Remover os caracteres que são adionados por padão antes do Base64 da imagem (data:image/png;base64,).
            //Pois só depois disso vem o Base64 que precisamos salvar.
            dados.base64 = base64.substr(base64.indexOf(',') + 1, base64.length);
            //Base64 original:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABQCAYAAADvLIfGAAAH9ElEQVR4nO...
            //Base64 correta:iVBORw0KGgoAAAANSUhEUgAAAfQAAABQCAYAAADvLIfGAAAH9ElEQVR4nO...
            $.ajax({
                type: 'POST',
                //Chamar o webmethod SalvarImagem em webservice.asmx
                url: "webservice.asmx/SalvarImagem",
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                //enviar o base64 como parâmetro
                data: JSON.stringify(dados),
                success: function (data) {
                    alert(data.d);
                } 
                , error: function (xmlHttpRequest, status, err) {
                    alert("Ocorreu o seguinte erro:" + xmlHttpRequest.responseText)
                }
            });
        }
    </script>
</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";
    }
    
}

 

 

Resumo:
Neste artigo vimos um exemplo simples que mostra como escrever no canvas, converter em Base64, enviar para um web service, converter a string Base64 em imagem novamente e salvá-la no servidor.

 

Download do projeto.

 

Comentários

Carregando comentários

Postar um novo comentário



Processando...