لم يعد JCROP Demo يعمل بعد تغيير حجم الصورة الرئيسية (تم تحديثه مع الصورة)

Question

أحاول تكرار هذا العرض التوضيحي JCROP. كل شيء يعمل بشكل جيد باستثناء ، صوري الأصلية كبيرة جدًا لذا ، حسب الدليل ، أنا تغيير حجمها على صفحتي مثل هذا:

 jQuery('#cropbox').Jcrop({
            onChange: showPreview,
            onSelect: showPreview,
            bgColor: 'white',
            aspectRatio: 1,
            boxWidth: 300,
            boxHeight: 500
        });

المشكلة هي الآن نافذة المعاينة الثانية (معرف = "معاينة") لم تعد تُظهر ما هو موجود في القسم المزروع على صندوق cropbox. هنا مثال:

من الواضح أن نافذة المعاينة لا تتطابق مع المنطقة التي أقوم بها في الصورة الأولى.

أي فكرة عن كيفية الحصول على صورة المعاينة لإظهارها بشكل صحيح عند تغيير حجم الصورة الرئيسية مقدمًا ؟؟

Answer 1

محاولة هذا jsfiddle

لغة البرمجة:

<img id="cropbox" src="http://homepage.mac.com/davydewit/popacademie/rw_common/themes/blendit/images/header/image1.jpg" />

<br />

<br />
<div id="previewcrop">
<img id="preview" src="http://homepage.mac.com/davydewit/popacademie/rw_common/themes/blendit/images/header/image1.jpg" />
</div>

CSS:

#previewcrop{
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-left: 5px;
}

JS:

var imgwidth = 849; // width of the image
var imgheight = 423; // height of the image

jQuery('#cropbox').Jcrop({
            onChange: showPreview,
            onSelect: showPreview,
            bgColor: 'white',
            aspectRatio: 1,
            boxWidth: imgwidth/3,
            boxHeight: imgheight/3
        });

function showPreview(coords)
{
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $('#preview').css({
        width: Math.round(rx * imgwidth) + 'px',
        height: Math.round(ry * imgheight) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
};

Answer 2

function showPreview(coords)
{
    if (parseInt(coords.w) > 0)
    {
        var rx = 100 / coords.w;
        var ry = 100 / coords.h;

        jQuery('#preview').css({
            width: Math.round(rx * 800) + 'px',
            height: Math.round(ry * 600) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
    }
}

لـ (RX * 800) ، يجب أن يكون 800 عرض صورتك الحقيقية. لـ (RY * 600) ، يجب أن يكون 600 عرض صورتك الحقيقية. لقد اختبرت هذا مقابل صورة 800 × 600 وتعمل (باستخدام Tutorial3.html وتعديلها). أيضًا ، لا تستخدم عرض وارتفاع الصورة المقاس ، فلن يعمل.