الجمعة، 22 يوليو 2011

دمج الصور في ملفات HTML

بسم الله الرحمن الرحيم

أذا كنت قد قمت ببرمجة بأستخدم HTML , أو لديك أي معرفة بسيطة بهذي اللغة فأنك تعرف أنه للأضافة صورة للمستند يجب أن تستخدم الوسوم التالية :


<img src="example.gif" alt="test" />

تلاحظ أننا حددنا مكان الصورة بأستخدام src , و في حالة المثال ستكون الصورة في نفس مجلد الصفحة و يمكن أن نحدد صورة من موقع أنترنت مختلف أو مجلد في الموقع كما في المثال التالي :

src="/images/example.png"
src="http://www.example.com/test.png"

و لكن في البريد الألكتروني و الرسائل بصيغة HTML لا يمكن أستعمال الصور المرسلة مع الرسالة و أذا كنت لا تريد أستخدام مواقع الأستضافة فيمكنك أستخدام هذه الطريقة التي تسمى بـــ"Data URL scheme" حيث يتم دمج بيانات الصور من صفحة الأنترنت , سأستخدم لغة البايثون لأنشاء البيانات الخاصة بالصورة .

  • أنشاء الترميز الخاص بالصورة :
#!/usr/bin/python
import os.path
import sys
if len(sys.argv)==1:
    print "Usage:<Image path>"
    sys.exit(0)

file=sys.argv[1]

if (os.path.isfile(file))!=True:
    print "Error:input file not found !"
    sys.exit(1)

raw_data=open(file,'r').read().encode('base64').replace('\n','')
image_data='<img src="data:image/png;base64,%s" alt="image1" />' % raw_data
output=open('output.txt','w')
output.write(image_data)
output.close()
print image_data
print "Data save in output.txt "

قم بحفظ السكريبت بالأمتداد py ثم تنفيذ كالتالي :

./image_convert.py image.png

سيتم حفظ البيانات في ملف output.txt , قم بنسخ البيانات و دمجها بملف HTML كما في المثال :

<html>
<head>
<title>test</title>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAALWSURBVHjatJVNaBNBFIBndrNtfmitIgqFXgxUoeqpKIJHqZCDSu9FDx48qBf1IIigJ3srIniTiAd/DlJBEG3BNuhBChKNSqxI01Y0tkajabLZnT/n7c6ukzQpPdgNb2Z4u/PNm/cXLIRAG/EYaIOeCAwY41bvsDo4kOAjuCLXRLQFtwFaF+8/P/zDRkNF29hfpmY/oQh1CGe223RedWH67O7ZI0/ld6TVARh8rFkMC/PSzQf9JWvz6Q+2ebxad+M1YjYdzeUeVOuh7m2rkr8xNXphVmqZDtfBHvTc9fTOb4m+q9nvfNi7twqu8NZNfLlDGCsPE5/eXH5968pHHR5pCmR0OdF7BqAADGAc1gJ2iBAOUAw/nhiu9w4sS9V5KbaCh1kB1lonx+6lCivmCEC5BDA5UM6lCOQyjlzK/VlbwztqbRlJnrqWAkYQ5IhmrVWOJIbKVRQPoEweEMBhBn3gGnCfIRGmHDiy4iLWOyTVT1QwmQ7uWOJdgw5xGywlyqq1wMywUQTHBoEhpd4Mttw6TYI/wdLg+h6Y+bqWYC4tNjGKRONJ5QpDd4WXu45DQ98SBSVMhBYHAfU3+NnEDT8NavYK0gupoaT/OHYBwIEbqIJSxkOfcyWh/5WrSP1XoVWv8MqUOuWswMSHaMHjWqo1CPqXPeznQlavwAAMCsKK+YwgFZt7uYtCn+r5qz9hbtslmxXeZrTybgC7X+6MTrpfF8YNin2g5tM1O9lcbtydeTwJjFZgOK1K3r9Mu8X5iXX3x/mZCZKbTsNe3WK9V0CniUnZ1DVwYI/YmzpBt+06iszOqMPIalc4lTqem35kZTNpd+lzTmp+6yW9qgkpeLeUnui+Y4fE9h0H2da+3SzW3Se43FMtLeLi/DuxmH+B8lNw/TIklAYVbdsmNCMpcSkJNXdqOU/BXkhddf1aUG3t2uaqRq+kQ68oLR6umtfV6P/bX9NfAQYAq24NPU7NIRUAAAAASUVORK5CYII=" alt="image1" />
</body>
</html>

 قم بحفظ المثال بالأمتداد .html بواسطة برنامج Notepad في ويندوز أو gedit في لينكس , ثم أعرض الملف بواسطة المتصفح .


هناك 5 تعليقات:

  1. شكرا جزيلا على المعلومات القيمة

    ردحذف
  2. عفواً
    منورة مدونتي :-)

    ردحذف
  3. أخوِي ممكنِ شرح أعمق لأنِ واللهِ مآ فهمتِ
    ومشكوِرِ أخوِي

    ردحذف
    الردود
    1. يا أخوي الموضوع عن تحويل الصور لكي يتم دمجها مع ملفات HTML الخاصة بالويب ( الأنترنت), بدل أستخدام الطريقة العادية و هو رابط للصورة , و النص البرمجي هو باللغة البايثون لعملية التحويل .

      و لكي تتوضح الصورة بشكل أكبر أنسخ النص البرمجي الملون في أخر الموضوع و أضف في برنامج المفكرة في ويندوز , ثم أختر حفظ بأسم و غير نوع الملف في صندوق الحفظ إلى "All files" ثم أحفظه بأسم بالأمتداد "html." كهذا الأسم "hello.html" .

      و هذا رابط في توضيح لعملية الحفظ في برنامج المفكرة
      http://abgoor.blogspot.com/2010/10/batch.html

      حذف