سكربت تغير حجم الصور مع أمكانية ضغطها

تغيير حجم الصور وضغطها بكبسة زر

ما فائدة اداة تغير حجم الصور و ضغطها

اذا كان لديك صورة بمقاسات كبيرة و بالتالي ستكون ذات حجم كبير فاتك ستذهب الى احدى البرامج
المخصصة بالتعديل على الصور او الذهاب الى احد المواقع لتتمكن من التعديل على صورة
في هذا الموضوع اقدم لك اداة صغيرة الحجم وذات فائدة كبيرة تغيير حجم الصور وضغطها في HTML CSS وJavaScript أداة Image Resizer & Compressor، يمكن للمستخدمين تحميل صورة وتغيير حجم عرضها وارتفاعها أو تقليل حجمها. إذا قاموا بتحديد "قفل نسبة العرض إلى الارتفاع"، فسيتم حساب نسبة العرض إلى الارتفاع للصورة تلقائيًا وملؤها في الحقل عندما يبدأون في تغيير العرض أو الارتفاع. إذا تم تحديد "تقليل الجودة"، فسيتم تقليل جودة الصورة بنسبة 40%.

معاينة الأداة

معاينة الأداة

ويمكن للمستخدمين الأخيرين تنزيل الصور التي تم تغيير حجمها من خلال النقر على زر تنزيل الصورة. تذكر أن تنزيل الصور يتم أيضًا باستخدام Vanilla JavaScript. إذا كنت متحمسًا لمعرفة شكل أداة تغيير حجم الصورة هذه، فيمكنك فعل ذلك انقر هنا لعرض عرض توضيحي مباشر له ومحاولة تغيير حجم صورتك. ولكن، إذا كنت تريد مشاهدة فيديو تعليمي كامل لمشروع تغيير حجم الصور وضغطها، فيمكنك مشاهدة مقطع فيديو YouTube المحدد.

طريقة تركيب الأداة

1. الذهاب الى التخطيط
2. اختيار عمل صفحة جديدة
3. الأنتقال الى عرض HTML
4. لصق الأكواد الخاصة بالأداة
5. تسمية الاداة باسم مناسب
6. حفظ

الأكواد الخاصة بالأداة

<div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxUN9igXJF1YXOzcKm9AvSb0pyC6eoeiBopi_v40r6lYuAAdNoXVxvK6ZjDiwiUKGlxcHvCrTjn1WHzFwDeaSmvdQka8gL35AgJYwWK0YQvr-ww_VnjKjloIN5-l4kQVoZvxrlfa89D8EmFadpKPDgt6O9i4QTIlulJPhGLmy17CXSpIqA0KFZTyZ2KNjN/s195/1515.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="151" data-original-width="195" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxUN9igXJF1YXOzcKm9AvSb0pyC6eoeiBopi_v40r6lYuAAdNoXVxvK6ZjDiwiUKGlxcHvCrTjn1WHzFwDeaSmvdQka8gL35AgJYwWK0YQvr-ww_VnjKjloIN5-l4kQVoZvxrlfa89D8EmFadpKPDgt6O9i4QTIlulJPhGLmy17CXSpIqA0KFZTyZ2KNjN/s1600/1515.png" width="195" /></a></div></div><h2 style="text-align: right;">تغيير حجم الصور وضغطها </h2>تغيير حجم الصور وضغطها في HTML CSS وJavaScript   أداة <b>Image Resizer &amp; Compressor</b>، يمكن للمستخدمين تحميل صورة وتغيير حجم عرضها وارتفاعها أو تقليل حجمها. إذا قاموا بتحديد "قفل نسبة العرض إلى الارتفاع"، فسيتم حساب نسبة العرض إلى الارتفاع للصورة تلقائيًا وملؤها في الحقل عندما يبدأون في تغيير العرض أو الارتفاع. إذا تم تحديد "تقليل الجودة"، فسيتم تقليل جودة الصورة بنسبة 40%.<div><div class="wrapper">

      <div class="upload-box">

        <input accept="image/*" hidden="" type="file" />

        <img alt="" src="https://www.codingnepalweb.com/demos/resize-and-compress-image-javascript/upload-icon.svg" />

        <p>البحث عن الصورة المطلوبة</p>

      </div>

      <div class="content">

        <div class="row sizes">

          <div class="column width">

            <label>العرض</label>

            <input type="number" />

          </div>

          <div class="column height">

            <label>الأرتفاع</label>

            <input type="number" />

          </div>

        </div>

        <div class="row checkboxes">

          <div class="column ratio">

            <input checked="" id="ratio" type="checkbox" />

            <label15 for="ratio">نظام قفل الجانب</label15>

          </div>

          <div class="column quality">

            <input id="quality" type="checkbox" />

            <label16 for="quality">تقليل جودة الصورة</label16>

          </div>

        </div>

        <button class="download-btn">تحميل الصورة</button>

      </div>

    </div>

<style>

.wrapper{

  width: 650px;    margin: 0 auto;

  height: 436px;

  padding: 30px;

background: var(--BodyBG);

  border-radius: 9px;

  transition: height 0.2s ease;

}

.wrapper.active{

  height: 100%;

}

.wrapper .upload-box{

  height: 375px;

  display: flex;

  cursor: pointer;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  border-radius: 5px;

  border: 2px dashed #afafaf;

}

.wrapper.active .upload-box{

  border: none;

}

.upload-box p{

  font-size: 1.06rem;

  margin-top: 20px;

}

.wrapper.active .upload-box p{

  display: none;

}

.wrapper.active .upload-box img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 5px;

}

.wrapper .content{

  opacity: 0;

  margin-top: 28px;

  pointer-events: none;

}

.wrapper.active .content{

  opacity: 1;

  pointer-events: auto;

  transition: opacity 0.5s 0.05s ease;

}

  label15 {

    margin-right: 36px;

    line-height: 16px;

}

  label16 {

    margin-right: 10px;

}

  button.download-btn:hover {

    background: #5b47c3;    transition: all .1s linear;

}

.content .row{

  display: flex;

  justify-content: space-between;

}

.content .row .column{

  width: calc(100% / 2 - 15px);

}

.row .column label{

  font-size: 1.06rem;

}

.sizes .column input{

  width: 100%;

  height: 49px;

  outline: none;

  margin-top: 7px;

  padding: 0 15px;

  font-size: 1.06rem;

  border-radius: 4px;

  border: 1px solid #aaa;

}

.sizes .column input:focus{

  padding: 0 14px;

  border: 2px solid #927DFC;

}

.content .checkboxes{

  margin-top: 20px;

}

.checkboxes .column{

  display: flex;

  align-items: center;

}

.checkboxes .column input{

  width: 17px;

  height: 17px;

  margin-right: 9px;

  accent-color: #927DFC;

}

.content .download-btn{

  width: 100%;

  color: #fff;

  outline: none;

  border: none;

  cursor: pointer;

  font-size: 1.06rem;

  border-radius: 5px;

  padding: 15px 0;

  margin: 30px 0 10px;

  background: #927DFC;

  text-transform: uppercase;    transition: all .1s linear;

}

</style>

    <script type="text/javascript"> 

//<![CDATA[ 

const uploadBox = document.querySelector(".upload-box"),

previewImg = uploadBox.querySelector("img"),

fileInput = uploadBox.querySelector("input"),

widthInput = document.querySelector(".width input"),

heightInput = document.querySelector(".height input"),

ratioInput = document.querySelector(".ratio input"),

qualityInput = document.querySelector(".quality input"),

downloadBtn = document.querySelector(".download-btn");

let ogImageRatio;

const loadFile = (e) => {

    const file = e.target.files[0]; // getting first user selected file

    if(!file) return; // return if user hasn't selected any file

    previewImg.src = URL.createObjectURL(file); // passing selected file url to preview img src

    previewImg.addEventListener("load", () => { // once img loaded

        widthInput.value = previewImg.naturalWidth;

        heightInput.value = previewImg.naturalHeight;

        ogImageRatio = previewImg.naturalWidth / previewImg.naturalHeight;

        document.querySelector(".wrapper").classList.add("active");

    });

}

widthInput.addEventListener("keyup", () => {

    // getting height according to the ratio checkbox status

    const height = ratioInput.checked ? widthInput.value / ogImageRatio : heightInput.value;

    heightInput.value = Math.floor(height);

});

heightInput.addEventListener("keyup", () => {

    // getting width according to the ratio checkbox status

    const width = ratioInput.checked ? heightInput.value * ogImageRatio : widthInput.value;

    widthInput.value = Math.floor(width);

});

const resizeAndDownload = () => {

    const canvas = document.createElement("canvas");

    const a = document.createElement("a");

    const ctx = canvas.getContext("2d");

    // if quality checkbox is checked, pass 0.5 to imgQuality else pass 1.0

    // 1.0 is 100% quality where 0.5 is 50% of total. you can pass from 0.1 - 1.0

    const imgQuality = qualityInput.checked ? 0.5 : 1.0;

    // setting canvas height & width according to the input values

    canvas.width = widthInput.value;

    canvas.height = heightInput.value;

    // drawing user selected image onto the canvas

    ctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);

    

    // passing canvas data url as href value of <a> element

    a.href = canvas.toDataURL("image/jpeg", imgQuality);

    a.download = new Date().getTime(); // passing current time as download value

    a.click(); // clicking <a> element so the file download

}

downloadBtn.addEventListener("click", resizeAndDownload);

fileInput.addEventListener("change", loadFile);

uploadBox.addEventListener("click", () => fileInput.click());

//]]> 

</script><div><br /></div>

ويمكن للمستخدمين الأخيرين تنزيل الصور التي تم تغيير حجمها من خلال النقر على <b>زر تنزيل الصورة</b>. تذكر أن تنزيل الصور يتم أيضًا باستخدام Vanilla JavaScript.

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

</div><div><br /></div><h3 style="text-align: right;">ملاحظة</h3><div><br /></div><div>اذا اخترت<b> نظام قفل الجانب</b> فسيتم حساب نسبة العرض إلى الارتفاع للصورة تلقائيًا وملؤها في الحقل عندما تبدأ في تغيير العرض أو الارتفاع.</div><br /><br /><div id="gtx-trans" style="left: 166px; position: absolute; top: 537.297px;"><div class="gtx-trans-icon"></div></div>

ملاحظة

اذا اخترت نظام قفل الجانب فسيتم حساب نسبة العرض إلى الارتفاع للصورة تلقائيًا

 وملؤها في الحقل عندما تبدأ في تغيير العرض أو الارتفاع.