{"id":682,"date":"2017-05-09T16:40:22","date_gmt":"2017-05-09T19:40:22","guid":{"rendered":"http:\/\/gianfratti.com\/?p=682"},"modified":"2017-05-09T16:45:58","modified_gmt":"2017-05-09T19:45:58","slug":"html5-salvar-imagem-do-canvas-com-jquery-e-c","status":"publish","type":"post","link":"http:\/\/gianfratti.com\/index.php\/html5-salvar-imagem-do-canvas-com-jquery-e-c\/","title":{"rendered":"HTML5 – Salvar imagem do Canvas com jQuery e C#"},"content":{"rendered":"

Recentemente estava estudando um pouco sobre HTML 5 especificamente com o Canvas, ap\u00f3s gerar uma imagem com base em um texto digitado pensei em salvar a imagem em disco usando C# com Base64.\"\"Canvas.aspx<\/strong><\/p>\n

\r\n<%@ Page Language="C#" AutoEventWireup="true" CodeFile="canvas.aspx.cs" Inherits="canvas" %>\r\n\r\n<!DOCTYPE html>\r\n\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head runat="server">\r\n    <title>Exemplo de canvas<\/title>\r\n    <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;" \/>\r\n    <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;" \/>\r\n<\/head>\r\n<body>\r\n    \r\n<form id="form1" runat="server">\r\n\r\n<div>\r\n            Canvas\r\n        <\/div>\r\n\r\n\r\n<div>\r\n            <canvas id="myCanvas" width="500" height="80" style="border: 1px solid #ddd;"><\/canvas>\r\n        <\/div>\r\n\r\n\r\n<div><input placeholder="Digite o nome" style="width:496px" onkeyup="desenhar()" type="text" id="txtNome" \/><\/div>\r\n\r\n\r\n<div><input type="button" onclick="salvar()" value="Salvar" \/><\/div>\r\n\r\n    <\/form>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
webservice.cs<\/strong><\/p>\n
\r\nusing System;\r\nusing System.Collections.Generic;\r\nusing System.Drawing;\r\nusing System.Drawing.Imaging;\r\nusing System.IO;\r\nusing System.Linq;\r\nusing System.Web;\r\nusing System.Web.Services;\r\n\r\n[WebService(Namespace = "http:\/\/tempuri.org\/")]\r\n[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]\r\n\/\/ To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. \r\n[System.Web.Script.Services.ScriptService]\r\npublic class WebService : System.Web.Services.WebService {\r\n\r\n    public WebService () { }\r\n\r\n    [WebMethod()]\r\n    public string SalvarImagem(string base64)\r\n    {\r\n        \/\/MemoryStream com o base64 recebido por par\u00e2metro\r\n        using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(base64)))\r\n        {\r\n            \/\/Criar um novo Bitmap baseado na MemoryStream\r\n            using (Bitmap bmp = new Bitmap(ms))\r\n            {\r\n                \/\/Local onde vamos salvar a imagem (raiz do site + \/canvas.png)\r\n                string path = Server.MapPath("~\/canvas.png");\r\n\r\n                \/\/Salvar a imagem no formato PNG\r\n                bmp.Save(path, ImageFormat.Png);\r\n            }\r\n        }\r\n\r\n        return "Imagem foi salva com sucesso";\r\n    }\r\n    \r\n}\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Recentemente estava estudando um pouco sobre HTML 5 especificamente com o Canvas, ap\u00f3s gerar uma imagem com base em um texto digitado pensei em salvar a imagem em disco usando C# com Base64.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2,15,8,9],"tags":[116],"class_list":["post-682","post","type-post","status-publish","format-standard","hentry","category-net-framework","category-back-end","category-front-end","category-html","tag-htmlcanvas"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/comments?post=682"}],"version-history":[{"count":13,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/682\/revisions"}],"predecessor-version":[{"id":696,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/682\/revisions\/696"}],"wp:attachment":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/media?parent=682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/categories?post=682"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/tags?post=682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}