HTML'den resim oluşturma

Merhaba Sevgili Okurlar,
Bu yazımda sayfamızdaki html elementlerini nasıl resim olarak kayıt edeceğimizden bahsedeceğim.
Örneğin web sayfaımızda bir div etiketini resim olarak kaydetmek istiyoruz bunu yapmak için html2canvas kütüphanesinden faydalanacağız.

İlk olarak basit bir MVC projesi oluşturalım. ASP .Net MVC No Authentication bir proje oluşturalım.

Okurken ne dinlemeli :

Senaryomuz şu şekilde olacak: Ana sayfamızda yer alan test2 id'li div'i resim olarak kaydedeceğiz.

Proje oluştuktan Index sayfamızın view'ini oluşturarak devam edelim.

ViewBag.Title = "Home Page";

}

<h2>Convert your html divs to image.</h2>

</div>

<br />

<p style="color:white;font-size:34px;">Hello ,I am Iron Man.</p>

</div>

…

<br />
<div>
<input type="submit" id="create_image" name="create" class="btn btn-primary btn-lg" style="width:100%;" value="Create Image" onclick="CreateImage()" />

</div>

ve bu sayfa için ön tarafta jquery ile div'i yakalamak için aşagıdaki script'i ındex sayfamıza ekleyelim.

function CreateImage() {

html2canvas($("#test2")[0]).then(function (canvas) {

var base64 = canvas.toDataURL();

$.ajax({

method: "POST",

url: '@Url.Content("~/Home/CreateImage")',

data: { 'imagedata': base64 },

success: function (res) {

var jtext = JSON.stringify(res);

var returnedData = JSON.parse(jtext);

if (returnedData.Code == true || returnedData.Code == 'true') {

alert("Image Saved");

} else {

alert("Fail! " + returnedData.Description);

location.reload();

}

}, error: function (x, h, r) {

alert(x + h + r);

}

});

return false;

}

</script>

Önce jquery daha sonra html2canvas .js'lerini sayfaya import ettik ve bu sayede canvastoDataURL ile base64 türünden oluşan resmin kodlarını almış olduk. Aldığımız base64 datayı controllere aktarıp resim olarak kaydetmek için bir ajax çağrısı yaptık.Parametre olarak da base64 datasını yolladık.

Kontroller tarafını kodlayalım. HomeController'de:

public ActionResult Index()

{

return View();

}

public class CustomJsonResult

{

public bool Code { get; set; }

public string Description { get; set; }

}

[HttpPost]

public ActionResult CreateImage(string imagedata)

{

CustomJsonResult result = new CustomJsonResult();

result.Code = false;

result.Description = "";

try

{

imagedata = imagedata.Split(',')[1];

string fileName = "MyUniqueImageFileName_"+DateTime.Now.ToString("dd_MM_yyyy_HH_mm_ss")+".jpg";

string fileNameWitPath = Path.Combine(Server.MapPath("~/FolderToSave"), fileName);

using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))

{

using (BinaryWriter bw = new BinaryWriter(fs))

{

byte[] data = Convert.FromBase64String(imagedata);

bw.Write(data);

bw.Close();

}

fs.Close();

}

result.Code = true;

}

catch (Exception ex)

{

result.Description = ex.ToString();

}

return Json(result, JsonRequestBehavior.AllowGet);

}

CreateImage metodunda image datasını , 'e göre ayırıp düzenliyoruz daha sonra bu datayı BinaryWriter yardımı ile byte data haline getirip verdiğimiz path vasıtası ile istediğimiz yere resim olarak kayıt edebilir hale geliyoruz.

Projemizi çalıştıralım ve neler olduğunu görelim.

Create Image butonuna tıklayalım ve istediğimiz gibi FolderToSave klasörüne "Hello,I am Iron Man" yazısı ve görselin bulunduğu div'in resim olarak kaydedildiğini görelim. FolderToSave klasörünü önceden website root'da oluşturmamız gerektiğini unutmayalım.

Proje kodlarını buradan indirip,inceleyebilirsiniz. Okuduğunuz için teşekkürler.

Sağlıkla kalın,mutlu olun.

Author Description