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.