تحويل أكواد HTML إلي صوره

هل يمكن تحويل اكواد HTML إلي صوره وتنزيله علي جهازك؟

بلطبع يمكنك فعل ذلك بواسطه إستخدام بعض مكتبات Jquery وبعض الأكواد مثل HTML و Javascript و CSS لفعل ذلك.
ستستطيع معرفه كيفيه تحويل كود HTML إلي صوره بصيغه PNG أو JPG عبر إنشاء ملف HTML ليفعل ذلك تلقائيا لتحميل الصوره علي حاسوبك أو الهاتف.

كيفيه فعل ذلك ؟

1- إنشاء ملف جديد بصيغه HTML
2- إستخدام أكواد CSS التاليه :

@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');

#wrap {
  margin: 20px auto;
  text-align: center
}

#wrap a {
  text-decoration: none
}

.tombolripple {
  cursor: pointer !important;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
  -webkit-appearance: none;
  font-size: 1.7em;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  padding: 20px 25px;
  margin: 0 15px;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.tombolripple:hover,
.tombolripple:active {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.tombolripple.tsatu {
  background: #e67e22;
}

.tombolripple.tdua {
  background: #3498db;
    position: absolute;
  top: 100px;
  border: 3px solid white;
  width:60px;
  height:24;
  line-height: 27px;

}

.tombolripple.tsatu:hover,
.tombolripple.tsatu:active {
  background: #f49541;
}

.tombolripple.tdua:hover,
.tombolripple.tdua:active {
  background: #4aaff3;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

circle {
  fill: rgba(255, 255, 255, 0.07);
}

.ripple-effect {
  position: relative;
  overflow: hidden;
  -webkit-transform: translatez(0);
}

.teffect {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: scale(0);
  background: #fff;
  opacity: 0.5;
}

.teffect.animate {
  animation: ripple-effect 0.5s linear;
}

@keyframes ripple-effect {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

@-webkit-keyframes ripple-effect {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

مهمه الأكواد عمل مظهر إلي الازرار يمكنك التعديل عليها للتغير في مظهر الأزرار مثل اللون و الحجم و الإرتفاع أو إضاف تأثيرات

2- إستخدام أكواد HTML

مهمه اكواد HTML ؟

1- السطر الأول لعمل Tag Center

2- السطر الرابع هو الذي ستكتب بداخله الأكواد الخاصه بك ولقد تم البدء عبر Div وعمل id و style يمكنك تعديله لوضع لوم خلفيه إلي الاكواد

3- السطر التاسع هو الكود الذي سيتم تحويله إلي صوره يمكنك تغير إلي أكوادك

4- السطر 12 لإغلاق Tag Div

5- السطر السابع عشر لعمل id تعريف من TAG div

6- السطر 19 لعمل إظهر للصوره

7- السطر الثاني والعشرون لعمل تنزيل للصوره

8- السطر الخامس وعشرون والسابع وعشرون لإغلاق tag div وعمل مسافه فراغ

9- السطر الثالثون لعمل id تعريفي من Tag div

تبقي أكواد JavaScript لتنفيذ أكواد HTML و Css

$("#yehia_button_demo").on('click', function() { 
    html2canvas(element, { 
     onrendered: function(canvas) { 
      $("#yehia_online").append(canvas); 
      getCanvas = canvas; 
     } 
    }); 
   });

$("#yehia_online_image").on('click', function() { 
    var imgageData = 
     getCanvas.toDataURL("image/png"); 
  
    var newData = imgageData.replace( 
    /^data:image\/png/, "data:application/octet-stream"); 
   
    $("#yehia_online_image").attr( 
    "download", "yehia.png").attr( 
    "href", newData); 
   }); 
  }); 
 </script> 
 </center>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script id="rendered-js">
(function ($) {
  $(".ripple-effect").click(function (e) {
    var rippler = $(this);
    if (rippler.find(".teffect").length === 0) {
      rippler.append("<span class='teffect'></span>");
    }
    var teffect = rippler.find(".teffect");
    teffect.removeClass("animate");
    if (!teffect.height() && !teffect.width())
    {
      var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
      teffect.css({ height: d, width: d });
    }
    var x = e.pageX - rippler.offset().left - teffect.width() / 2;
    var y = e.pageY - rippler.offset().top - teffect.height() / 2;
    teffect.css({
      top: y + 'px',
      left: x + 'px' }).
    addClass("animate");
  });
})(jQuery);
    </script>

السطر الثالث والثالثون لتنزيل الصوره بإسم yehia.png يمكنك تغيره إلي الإسم الذي تريد.
من السطر السابع وأربعون حتي النهايه لتنفيذ حركه الأزرار عند الضغط عليها.

يمكنك تحميل الملف كامل: