تغيير حجم الصور

https://stackoverflow.com/questions/1295712

18-09-2019
|

سؤال

أنا أعمل في تطبيق منتدى في PHP. في مجال التوقيع لدي
"<img src='randomimage.png'><br>bla blah"

إذا كانت الصورة أكبر من الحقل، فستتمدد جداولي وتبدو سيئة. هل هناك أي طريقة لإعادة حجم الصورة إذا كانت كبيرة جدا؟

آسف لغتي الإنجليزية الفقيرة وشكرا على القراءة

يحرر: الشيء هو أنه ليس فقط الصورة. إنها الصورة والنص "النص الكبير".

باحترام، توم

المحلول

بي أتش بي...

يمكنك إعادة حجم الصور مع GDLibrary (انظر: PHP / GD - اقتصاص وتغيير حجم الصور)، ولكن قد يكون ذلك معقدا إذا لم تكن مألوفا بالفعل مع PHP.

مسج / جافا سكريبت

يوجد مكون إضافي يمكنه تغيير حجم الصور ديناميكيا (تمدد الصورة نفسها). تحقق من maxside: http://0sss-tricks.com/maxside-jquery-plugin-and-how-to/

CSS ...

حلا سريعا للحفاظ على توقيع التصور تم ترويضه هو تقييد تجاوز الفائض مع CSS:

<img src="randomimage.png" />

يصبح

<div class="sigBox"><img src="randomimage.png" /></div>

مع CSS التالية:

div.sigBox { overflow:hidden; width:50px; height:50px; }

سيؤدي ذلك إلى إخفاء الصور الكبيرة، بدلا من السماح لهم بتشويه المحتوى الخاص بك.

نصائح أخرى

ربما تريد أولا أن تأخذ أبعاد الصور. ثم يمكنك الحفاظ على نسبة العرض إلى الارتفاع، مع تحديد حجم جديد عبر HTML البسيط ارتفاع و العرض سمات ل img بطاقة شعار.

قد ترغب أيضا في النظر في استضافة التواقيع محليا. عندما يقوم المستخدم بتحميل صورة، يمكنك القيام بكل تغيير الحجم ثم عبر مكتبة GD..

<img src="/img/foo.png" height="100" width="100" />

الارتفاع والعرض في بكسل. هذا إذا كنت ترغب في تغيير حجم الصورة في HTML (والذي يقوم بتنزيل الصورة الكاملة، ثم "يستعرض" حول الأحجام المحددة).

إذا كنت ترغب في تغيير ملف الصورة الفيزيائية برمجيا، تحقق من وظائف PHP GD: http://us.php.net/manual/en/ref.image.php.

لمنتدى تديره، وضعنا كتلة التوقيع في div مع overflow: hidden تعيين في CSS. وبهذه الطريقة، اكتسب المستخدم المستخدم الذي يضعه في صورة توقيع 600 × 300 ضخمة وفقرة نصية من القيام أي فائدة من القيام بذلك - فقط منطقة 400x90 المحددة التي أظهرت. يبدو أن تعمل بشكل جيد.

كما أشار Joshl و John T، يمكنك استخدام دعم PHP الذي تم إنشاؤه في معالجة الصور لتغيير الصور بشكل حيوي. في وضعك، يمكنك ببساطة إجراء برنامج نصي PHP الذي سيتم تحميل الصورة، وسيل تغيير حجمه إلى الأبعاد المناسبة، وخدمته وحفظ نسخة مخزنة مؤقتا من الصورة المعززة لتجنب معالجة العلامة العامة على الطلبات اللاحقة.

سوف ينتهي بك الأمر باستخدام شيء مثل هذا في رمز HTML الخاص بك

<img src="img.php?file=foobar.jpg">

باستخدام جافا سكريبت:

function changeSize(imageOrTextId, tableId)
{
    if (document.getElementById(imageOrTextId).width > document.getElementById(tableId).width)
    {
        document.getElementById(imageOrTextId).width = document.getElementById(tableId).width;
    }
}

مثال HTML:

<body onload="changeSize('image1', 'table1')">
    <table id="table1" width="400" height="400">
        <img src="randomimage.png" id="image1" />
    </table>
</body>

تعديل: يبدو أن جون ر نشرت أيضا هذه الطريقة للقيام بذلك ... آسف لم ألاحظها قبل النشر.

باستخدام CSS.

<img src="randomimage.png" style="max-width:100px;max-height:100px;" />

هذا يعمل في جميع المتصفحات التي اختبرتها

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
             <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        </head>

       <body>
        <?php
      $thumb_width = 100;
      $thumb_height = 100;
        $full = imagecreatefromjpeg('sample.jpg');
        $width = imagesx($full);
     $height = imagesy($full);

      if($width < $height) {
$divisor = $width / $thumb_width;
       } 
       else {
$divisor = $height / $thumb_height;
     }

    $new_width= ceil($width / $divisor);
  $new_height = ceil($height / $divisor);

  //get center point
  $thumbx = floor(($new_width - $thumb_width) / 2);
  $thumby = floor(($new_height - $thumb_height)/2);

 $new_image = imagecreatetruecolor($new_width, $new_height);
  $new_image_fixed = imagecreatetruecolor($thumb_width, $thumb_height);

   imagecopyresized($new_image, $full, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

   imagecopyresized($new_image_fixed, $new_image, 0, 0, $thumbx, $thumby, $thumb_width,                                      $thumb_height, $thumb_width, $thumb_height);

     imagejpeg($new_image, "new_sample.jpg", 100);
    imagejpeg($new_image_fixed, "new_sample_fixed.jpg", 100);
     ?>
     </body>
      </html>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow