أضافة زر تحميل الصورة

Mostafa Kobesy · 4 يوليو

كيف يمكن أضافة زر تحميل الصورة علي الكمبيوتر باستخدام جافاسكريبت

Mustafa Mahmoud7 · 4 يوليو

مرحبا مصطفى،

تستطيع عمل هذا الزر مباشرة في ملف الhtml بدون استخدام الجافاسكربت عن طريق استخدام الanchor tag (<a>) وإضافة له السمة download كالأتي

<button style="background-color: bisque">
    <a download href="image1.jpg" style="text-decoration: none; color: black">
        Download Resume
    </a>
</button>

لاحظ قمنا بإضافة السمة download للanchor tag ووضعنا مسار الصورة href وعند الضغط على هذا الزر سيتم تنزيل الصورة في جهازك.
توجِّه هذه الخاصية download المتصفح إلى تنزيل رابط URL بدلًا من الانتقال إليه، أي سيُطلَب من المستخدم حفظ الملف محليًا.
ملاحظة قم بتشغيل الملف html عن طريق الlive server وليس فتح الملف مباشرة.
للمزيد حول السمة download يمكن الإطلاع عليها في موسوعة حسوب

بالتوفيق...

عبدالباسط ابراهيم · 4 يوليو

بجانب الحل الذي اقترحه مصطفى في التعليق السابق يمكنك استخدام javascript لتحميل الصورة كمايلي

نضيف أولاً زر لتحميل الصورة <button> ثم نستخدم addEventListener للإستماع للحدث click

ثم ننشئ رابطًا (<a>) جديدًا ونضبط خاصية href الخاصة به على مصدر الصورة (src). ونضبط خاصية download للرابط باسم الملف الذي سيتم تحميله.

ليكون الكود كما بالشكل التالي

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تحميل الصورة</title>
</head>
<body>
    <img id="myImage" src="path_to_your_image.jpg" alt="صورة">
    <br>
    <button id="downloadButton">تحميل الصورة</button>

    <script>
        document.getElementById("downloadButton").addEventListener("click", function() {
            const image = document.getElementById("myImage");
            const link = document.createElement("a");
            link.href = image.src;
            link.download = "downloaded_image.jpg";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    </script>
</body>
</html>

محمد عبد العزيز3 · 4 يوليو

# يوجد طريقتين لتحميل الصورة علي الكمبيوتر:

أولاً: الطريقه الأسهل والأسرع بإستخدام السمه الdownload التي يوفرها الanchor tag وسأشرح لك كيفيه تنفيذ ذلك كالتالي:

تقوم بإنشاء تاج الimg وتضع فيه مسار الصورة حتي تكون ظاهره للمستخدم قبل تحميلها.
ثم تقوم بإنشاء الanchor tag وتُعطي له خاصية الhref بمسار الصورة.
ثم تقوم بوضع الخاصيه download وبإمكانك إعطاها قيمه أخري وبالتالي سوف تظهر الصورة علي جهاز المُستخدم بهذا الإسم.

ثم تضع داخل تاج الanchor تاج الbutton وتعطي له قيمه وليكن تحميل الصوره.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LEARN OOP</title>
</head>

<body>

  <img src="./your-path.png" alt="Download Image">
  <br />
  <a download="custom-name.png" href="./your-path.png">
    <button type="button">
      تحميل الصورة
    </button>
  </a>

</body>

</html>

ثانياً: طريقه إستخدام الjavascript التي تريدها في تنفيذ نفس الهدف وهو تحميل الصورة عند الضغط عليها والشرح موجود في التلعيقات الخاصه بالكود.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LEARN OOP</title>
</head>

<body>

  <img src="./me.png" id="img" alt="Download Image" width="300">
  <br />
  <button type="button" id="btnDownload">
    تحميل الصوره
  </button>

  <script>
    // نقوم بجلب عنصر الزر من الصفحه ووضعه في مُتغير
    const btnDownload = document.getElementById("btnDownload")
    // نقوم بإضافه حدث للزر وهو حدث الضغط click
    btnDownload.addEventListener("click", function () {
      // نقوم بجلب الصوره من الصفحه ووضعها في متغير
      const img = document.getElementById("img");
      // نقوم بإنشاء تاج الانكور حتي نستطيع استخدام خاصيه ال download الخاصه به
      const aTag = document.createElement("a");
      // نقوم بجعل خاصية الاتس ريف الخاصه بتاج الانكور تساوي خاصيه الاس ار سي الخاصه بتاج الايميج
      // ولهذا قمنا بجلب الصوره في الأعلي
      aTag.href = img.src;
      // الجزء الأهم وهو إستخدام خاصيه الداونلود وإعطاءها قيمه تظهر عند تحميلها
      aTag.download = "custom-name.png";
      // نقوم بوضع عنصر الانكور في جسم الصفحه
      document.body.appendChild(aTag);
      // نقوم بجعل تاج الانكور قابل للضغط حتي يتم تحميل الصوره
      aTag.click();
      // نقوم بحذف عنصر الانكور من جسم الصفحه بعد تحميل الصوره
      document.body.removeChild(aTag);
    });
  </script>
</body>

</html>

بالتوفيق.

أضافة زر تحميل الصورة

السؤال

Mostafa Kobesy

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Mahmoud7

عبدالباسط ابراهيم

محمد عبد العزيز3

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية