{"id":1090,"date":"2014-03-21T07:36:31","date_gmt":"2014-03-21T07:36:31","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1090"},"modified":"2014-03-21T07:36:31","modified_gmt":"2014-03-21T07:36:31","slug":"simple-pdf-to-image-converter-with-asp-net","status":"publish","type":"post","link":"http:\/\/www.rezafaisal.net\/?p=1090","title":{"rendered":"Simple PDF to Image Converter with ASP.NET"},"content":{"rendered":"

Pada posting ini akan dicoba menerangkan langkah demi langkah untuk membuat converer file format PDF menjadi gambar. Hal ini kadang diperlukan pada aplikasi web dapat langsung menampilkan secara langsung file yang diupload (dalam kasus ini adalah file PDF) tanpa harus meinstall plugin. Maka dibuatlah converter yang mengubah file PDF yang diupload menjadi file PNG (image), sehingga nanti jika user ingin melihat file yang sudah diupload cukup disajikan file gambar hasil dari proses convert tersebut.<\/p>\n

Untuk membuat converter sederhana ini digunakan library Magick.NET  (https:\/\/magick.codeplex.com\/<\/a>) dan juga diperlukan Ghostscript (http:\/\/www.ghostscript.com\/download\/gsdnld.html<\/a>).<\/p>\n

{Persiapan<\/em><\/strong>}<\/p>\n

Langkah pertama, adalah menginstall Ghostscript dari link di atas pada komputer yang menjadi web server.<\/p>\n

Langkah kedua, adalah meinstall library Magick.NET. Cara paling gampang untuk ini adalah via fitur Manage NuGet Package. Pada window Manage NuGet Package, masukkan magick pada kolom pencarian dan akan dapat dilihat daftar seperti berikut ini.<\/p>\n

\"blog1\"<\/a><\/p>\n

Pilih salah satu dari Magick.NET-Q16, kemudian klik tombol install. <\/p>\n

{Pemrograman<\/em><\/strong>}<\/p>\n

Selanjutnya adalah menyiapkan satu halaman Web Form seperti berikut ini.<\/p>\n

\n
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContohPdfConverter.aspx.cs" Inherits="Test_ContohPdfConverter" %><\/span>

<!<\/span>DOCTYPE<\/span> html<\/span>><\/span>

<<\/span>html<\/span> xmlns<\/span>="http:\/\/www.w3.org\/1999\/xhtml"<\/span>><\/span>
<<\/span>head<\/span> runat<\/span>="server"<\/span>><\/span>
    <<\/span>title<\/span>><\/<\/span>title<\/span>><\/span>
<\/<\/span>head<\/span>><\/span>
<<\/span>body<\/span>><\/span>
    <<\/span>form<\/span> id<\/span>="form1"<\/span> runat<\/span>="server"<\/span>><\/span>
    <<\/span>div<\/span>><\/span>
        <<\/span>asp:FileUpload<\/span> ID<\/span>="FileUpload_FilePdf"<\/span> runat<\/span>="server"<\/span> \/><\/span>
        <<\/span>asp:Button<\/span> ID<\/span>="Button_Convert"<\/span> OnClick<\/span>="Button_Convert_Click"<\/span> runat<\/span>="server"<\/span> Text<\/span>="PDF to JPG"<\/span> \/><\/span>
    <\/<\/span>div<\/span>><\/span>
    <\/<\/span>form<\/span>><\/span>
<\/<\/span>body<\/span>><\/span>
<\/<\/span>html<\/span>><\/span>
<\/pre>\n
<\/div>\n
Dan berikut ini adalah isi class code behind dari file aspx tersebut :<\/p>\n
\n
\n
   1:<\/span> using<\/span> System;<\/pre>\n
<\/p>\n
   2:<\/span> using<\/span> System.Collections.Generic;<\/pre>\n
<\/p>\n
   3:<\/span> using<\/span> System.Linq;<\/pre>\n
<\/p>\n
   4:<\/span> using<\/span> System.Web;<\/pre>\n
<\/p>\n
   5:<\/span> using<\/span> System.Web.UI;<\/pre>\n
<\/p>\n
   6:<\/span> using<\/span> System.Web.UI.WebControls;<\/pre>\n
<\/p>\n
   7:<\/span>  <\/pre>\n
<\/p>\n
   8:<\/span> using<\/span> ImageMagick;<\/pre>\n
<\/p>\n
   9:<\/span>  <\/pre>\n
<\/p>\n
  10:<\/span> public<\/span> partial<\/span> class<\/span> Test_ContohPdfConverter : System.Web.UI.Page<\/pre>\n
<\/p>\n
  11:<\/span> {<\/pre>\n
<\/p>\n
  12:<\/span>     protected<\/span> void<\/span> Page_Load(object<\/span> sender, EventArgs e)<\/pre>\n
<\/p>\n
  13:<\/span>     {<\/pre>\n
<\/p>\n
  14:<\/span>  <\/pre>\n
<\/p>\n
  15:<\/span>     }<\/pre>\n
<\/p>\n
  16:<\/span>     protected<\/span> void<\/span> Button_Convert_Click(object<\/span> sender, EventArgs e)<\/pre>\n
<\/p>\n
  17:<\/span>     {<\/pre>\n
<\/p>\n
  18:<\/span>         string<\/span> folderpdf = "\/Files\/Pdf\/"<\/span>;<\/pre>\n
<\/p>\n
  19:<\/span>         string<\/span> folderpng = "\/Files\/Png\/"<\/span>;<\/pre>\n
<\/p>\n
  20:<\/span>  <\/pre>\n
<\/p>\n
  21:<\/span>         if<\/span> (FileUpload_FilePdf.HasFile)<\/pre>\n
<\/p>\n
  22:<\/span>         {<\/pre>\n
<\/p>\n
  23:<\/span>             string<\/span> filename = GetFileName(FileUpload_FilePdf.FileName);<\/pre>\n
<\/p>\n
  24:<\/span>             string<\/span> filepdf = Server.MapPath("~"<\/span> + folderpdf) + filename;<\/pre>\n
<\/p>\n
  25:<\/span>             string<\/span> filepng = Server.MapPath("~"<\/span> + folderpng) + filename + ".png"<\/span>;<\/pre>\n
<\/p>\n
  26:<\/span>             FileUpload_FilePdf.SaveAs(filepdf);<\/pre>\n
<\/p>\n
  27:<\/span>  <\/pre>\n
<\/p>\n
  28:<\/span>             MagickReadSettings settings = new<\/span> MagickReadSettings();<\/pre>\n
<\/p>\n
  29:<\/span>             settings.Density = new<\/span> MagickGeometry(100, 100);<\/pre>\n
<\/p>\n
  30:<\/span>  <\/pre>\n
<\/p>\n
  31:<\/span>             using<\/span> (MagickImageCollection images = new<\/span> MagickImageCollection())<\/pre>\n
<\/p>\n
  32:<\/span>             {<\/pre>\n
<\/p>\n
  33:<\/span>                 images.Read(filepdf, settings);<\/pre>\n
<\/p>\n
  34:<\/span>                 MagickImage horizontal = images.AppendHorizontally();<\/pre>\n
<\/p>\n
  35:<\/span>                 horizontal.Write(filepng);<\/pre>\n
<\/p>\n
  36:<\/span>             }<\/pre>\n
<\/p>\n
  37:<\/span>         }<\/pre>\n
<\/p>\n
  38:<\/span>     }<\/pre>\n
<\/p>\n
  39:<\/span>  <\/pre>\n
<\/p>\n
  40:<\/span>     public<\/span> static<\/span> string<\/span> GetFileName(string<\/span> filename)<\/pre>\n
<\/p>\n
  41:<\/span>     {<\/pre>\n
<\/p>\n
  42:<\/span>         string<\/span> prefixname = String.Empty;<\/pre>\n
<\/p>\n
  43:<\/span>  <\/pre>\n
<\/p>\n
  44:<\/span>         prefixname = DateTime.Now.ToString("yyyyMMdd-HHmmss-"<\/span>) + DateTime.Now.Millisecond.ToString();<\/pre>\n
<\/p>\n
  45:<\/span>         filename = prefixname + "-"<\/span> + filename.Replace(" "<\/span>, ""<\/span>);<\/pre>\n
<\/p>\n
  46:<\/span>  <\/pre>\n
<\/p>\n
  47:<\/span>         return<\/span> filename;<\/pre>\n
<\/p>\n
  48:<\/span>     }<\/pre>\n
<\/p>\n
  49:<\/span> }<\/pre>\n
<\/div>\n<\/div>\n
Untuk menggunakan library Magick.NET maka pada kode perlu ditambahkan baris seperti pada baris ke-8.<\/p>\n
Pada kode di atas akan mempunyai alur kerja seperti berikut :<\/p>\n
    \n
  • File PDF akan diupload ke folder ~\/Files\/Pdf\/ yang ada pada root folder dari aplikasi web. Nama file yang diupload akan disesuaikan dengan cara memanggil method GetFileName, dimana format nama file akan ditambahkan time stamp sebagai prefix.<\/li>\n
  • File image akan disimpan dengan format PNG yang akan disimpan pada folder ~\/Files\/Png\/ dengan nama sesuai dengan nama file PDF yang diupload dengan ditampkan \u201c.png\u201d di belakangnya.  Sehingga jika nama file pdf yang telah diupload adalah 20140321-122246-882-garuda-bjm-sby-20140329.pdf maka nama file png yang akan disimpan adalah 20140321-122246-882-garuda-bjm-sby-20140329.pdf.png. <\/li>\n
  • Kemudian setelah file pdf sukses disimpan dilanjutkan dengan proses konversi dari PDF ke PNG dengan cara seperti yang dapat dilihat pada kode pada baris ke-28 sampai ke-38.<\/li>\n<\/ul>\n
    Pada baris ke-28 dan ke-29 adalah untuk menentukan setting dari hasil yang diinginkan, salah satunya adalah menentukan kualitas dari output yang diinginkan. Semakin tinggi angka density tersebut maka semakin besar dimensi image (pixel widthxheight) yang dihasilkan. Kemudian dengan class MagickImageCollection akan dilakukan proses membaca file PDF seperti yang terlihat pada baris ke-33.<\/p>\n
    Sedangkan pada baris ke-34 ditentukan bagaimana format dari output yang dihasilkan, pada contoh tersebut digunakan method AppendHorizontally yang nanti akan menghasilkan hasil yang menyamping. Artinya jika file PDF terdiri atas 3 halaman, ketiga halaman tersebut akan dibuat bersusun ke samping dari kiri ke kanan pada gambar. Jika ingin mendapatkan hasil dimana ketiga file itu tersusun dari atas ke bawah maka baris ke-34 tersebut dapat diganti menjadi seperti berikut :<\/p>\n
    \n
    \n
       1:<\/span> using<\/span> (MagickImageCollection images = new<\/span> MagickImageCollection())<\/pre>\n
    <\/p>\n
       2:<\/span> {<\/pre>\n
    <\/p>\n
       3:<\/span>     images.Read(filepdf, settings);<\/pre>\n
    <\/p>\n
       4:<\/span>     MagickImage horizontal = images.AppendVertically();<\/pre>\n
    <\/p>\n
       5:<\/span>     horizontal.Write(filepng);<\/pre>\n
    <\/p>\n
       6:<\/span> }<\/pre>\n
    <\/div>\n<\/div>\n
    Dan yang terakhir adalah menulis hasil proses baca tadi dengan ke file seperti yang dapat dilihat pada baris ke-5 di atas.<\/p>\n
    Selamat mencoba.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Pada posting ini akan dicoba menerangkan langkah demi langkah untuk membuat converer file format PDF menjadi gambar. Hal ini kadang diperlukan pada aplikasi web dapat langsung menampilkan secara langsung file yang diupload (dalam kasus ini adalah file PDF) tanpa harus…<\/p>\n","protected":false},"author":1,"featured_media":1089,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[68,92,96],"class_list":["post-1090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-asp-net","tag-c","tag-vs-2013"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2014\/03\/blog1_thumb4.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-hA","_links":{"self":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1090"}],"version-history":[{"count":0,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1090\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/1089"}],"wp:attachment":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1090"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}