جافا سكريبت صورة بحجم ثانية

StackOverflow https://stackoverflow.com/questions/170624

سؤال

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

ولقد حاولت تعديل DOM بإضافة سمات height وwidth على الطاير، ولكن يبدو لم تنجح في IE6.

هل كانت مفيدة؟

المحلول

لتعديل صورة نسبيا، ببساطة تغيير واحد فقط من خصائص المغلق عرض / ارتفاع، وترك مجموعة أخرى لصناعة السيارات. 

image.style.width = '50%'
image.style.height = 'auto'

وهذا سيضمن أن نسبة جانبها لا يزال هو نفسه.

ونضع في اعتبارنا أن المتصفحات تميل إلى <م> تمتص في تغيير حجم الصور بشكل جيد - عليك ربما تجد أن الصورة التي تم تغيير حجمها بك تبدو مروعة

.

نصائح أخرى

وحسنا أنها تحل، وهنا هو قانون بلدي النهائي 

if($(this).width() > $(this).height()) { 
 $(this).css('width',MaxPreviewDimension+'px');
 $(this).css('height','auto');
} else {
 $(this).css('height',MaxPreviewDimension+'px');
 $(this).css('width','auto');
}

وشكرا لكم أيها الرجال

وبدلا من تعديل الطول والعرض سمات الصورة، في محاولة تعديل ارتفاع CSS والعرض. 

myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";

واحد مشترك "مسكتك" هو أن أساليب الطول والعرض هي السلاسل التي تشمل وحدة، مثل "بكسل" في المثال أعلاه.

وتحرير - أعتقد أن تحديد الطول والعرض مباشرة بدلا من استخدام style.height وstyle.width يجب أن تعمل. كان يمكن أن يكون أيضا ميزة وجود بالفعل الأبعاد الأصلية. يمكنك إضافة القليل من التعليمات البرمجية الخاصة بك؟ هل أنت متأكد من أنك في وضع المعايير بدلا من وضع المراوغات؟

وهذا يجب أن تعمل: 

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
أجاب

هذا السؤال هنا: <لأ href = "https://stackoverflow.com/questions/3971841 / كيف إلى تغيير حجم-صور عالية نسبيا لحفظ-والتي تبلغ نسبة أبعادها / 14731922 # 14731922 "> كيفية تغيير حجم الصور بشكل متناسب / الحفاظ على نسبة الجانب؟ . أنا نسخها هنا لأنني أعتقد حقا أنه هو وسيلة موثوق بها للغاية:) 

 /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }

وحاول التعليمة البرمجية التالية، وعملت موافق على IE6 على ويندوز إكس بي برو SP3. 

function Resize(imgId)
{
  var img = document.getElementById(imgId);
  var w = img.width, h = img.height;
  w /= 2; h /= 2;
  img.width = w; img.height = h;
}

وأيضا OK في FF3 وأوبرا 9.26.

وعلى سبيل المثال: كيف لتغيير حجم مع بالمئة 

<head>
    <script type="text/javascript">
        var CreateNewImage = function (url, value) {
            var img = new Image;
            img.src = url;
            img.width = img.width * (1 + (value / 100));
            img.height = img.height * (1 + (value / 100));

            var container = document.getElementById ("container");
            container.appendChild (img);
        }
    </script>
</head>
<body>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 40);">Zoom +40%</button>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 60);">Zoom +50%</button>
    <div id="container"></div>
</body>

وليس لديك للقيام بذلك مع جافا سكريبت. يمكنك فقط إنشاء فئة CSS وتطبيقه على العلامة. 

.preview_image{
        width: 300px;
    height: auto;
    border: 0px;
}

وهذا يعمل لجميع الحالات. 

function resizeImg(imgId) {
    var img = document.getElementById(imgId);
    var $img = $(img);
    var maxWidth = 110;
    var maxHeight = 100;
    var width = img.width;
    var height = img.height;
    var aspectW = width / maxWidth;
    var aspectH = height / maxHeight;

    if (aspectW > 1 || aspectH > 1) {
        if (aspectW > aspectH) {
            $img.width(maxWidth);
            $img.height(height / aspectW);
        }
        else {
            $img.height(maxHeight);
            $img.width(width / aspectH);
        }
    }
}

استخدم مسج 

var scale=0.5;

minWidth=50;
minHeight=100;

if($("#id img").width()*scale>minWidth && $("#id img").height()*scale >minHeight)
{
    $("#id img").width($("#id img").width()*scale);
    $("#id img").height($("#id img").height()*scale);
}

وجرب هذا .. 

<html>
<body>
<head>
<script type="text/javascript">
function splitString()
{
var myDimen=document.getElementById("dimen").value;
var splitDimen = myDimen.split("*");
document.getElementById("myImage").width=splitDimen[0];
document.getElementById("myImage").height=splitDimen[1];
}
</script>
</head>

<h2>Norwegian Mountain Trip</h2>
<img border="0" id="myImage" src="..." alt="Pulpit rock" width="304" height="228" /><br>
<input type="text" id="dimen" name="dimension" />
<input type="submit" value="Submit" Onclick ="splitString()"/>

</body>
</html>

في مربع النص يعطي بعدا كما رغبتكم اور، في شكل 50 * 60. انقر فوق تقديم. سوف تحصل على صورة حجمها. إعطاء مسار صورة في مكان من النقاط في علامة صورة. 

function resize_image(image, w, h) {

    if (typeof(image) != 'object') image = document.getElementById(image);

    if (w == null || w == undefined)
        w = (h / image.clientHeight) * image.clientWidth;

    if (h == null || h == undefined)
        h = (w / image.clientWidth) * image.clientHeight;

    image.style['height'] = h + 'px';
    image.style['width'] = w + 'px';
    return;
}

ويمر إما عنصر IMG DOM، أو هوية عنصر صورة، وعرض جديد والارتفاع.

وأو يمكنك تمرير إما مجرد عرض أو مجرد ارتفاع (إن مجرد ارتفاع، ثم تمرير العرض لاغيا أو غير معروف)، وسوف تغيير حفظ نسبة الارتفاع

لتغيير حجم الصورة في جافا سكريبت: 

$(window).load(function() {
mitad();doble();
});
function mitad(){ 

    imag0.width=imag0.width/2;
    imag0.height=imag0.height/2;

    }
function doble(){ 
  imag0.width=imag0.width*2; 
  imag0.height=imag0.height*2;}

وimag0 هو اسم الصورة: 

 <img src="xxx.jpg" name="imag0">

وهنا هي لغتي حل ملء غطاء (على غرار خلفية الحجم: غطاء، لكنه يدعم متصفح IE القديم) 

<div class="imgContainer" style="height:100px; width:500px; overflow:hidden; background-color: black">
    <img src="http://dev.isaacsonwebdevelopment.com/sites/development/files/views-slideshow-settings-jquery-cycle-custom-options-message.png" id="imgCat">
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script>
    $(window).load(function() {
        var heightRate =$("#imgCat").height() / $("#imgCat").parent(".imgContainer").height();
        var widthRate = $("#imgCat").width() / $("#imgCat").parent(".imgContainer").width();

        if (window.console) {
            console.log($("#imgCat").height());
            console.log(heightRate);
            console.log(widthRate);
            console.log(heightRate > widthRate);
        }
        if (heightRate <= widthRate) {
            $("#imgCat").height($("#imgCat").parent(".imgContainer").height());
        } else {
            $("#imgCat").width($("#imgCat").parent(".imgContainer").width());
        }
    });
</script>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top