Jcrop e immagini di grandi dimensioni

[dontesse]

Ciao a tutti
sto utilizzando jcrop in un sito asp.net
Ho un problema con immagini di grandi dimensioni(width e height). Carico l'immagine con html5 e adatto l'immagine alle dimensioni del contenitore assegnando a class del tag img il valore 'img-response'. Il problema è che se seleziono un'area, le coordinate dell'area non sono calcolate sulle dimensioni dell'immagine nel contenitore, ma sull'immagine originale. Quindi accade che l'area ritagliata non sia quella giusta.
C'è un modo per ridimensionare un'immagine con le api di html5 dopo averla selezionata e prima di assegnarla al tag img? Oppure impostando qualche parametro di jcrop? Ho trovato trueSize, ma nulla

var pointX1;
var pointY1;
var pointX2;
var pointY2;
var width;
var height;

// convert bytes into friendly format
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};

// check for selected crop region
function checkForm() {
    if (parseInt($('#w').val())) return true;
    $('#jcropError').html('Selezionare l\' area da ritagliare').show();
    return false;
};

// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#' + pointX1).val(e.x);
    $('#' + pointY1).val(e.y);
    $('#' + pointX2).val(e.x2);
    $('#' + pointY2).val(e.y2);
    $('#' + width).val(e.w);
    $('#' + height).val(e.h);
};

// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api, boundx, boundy;

function fileSelectHandler(image_file, w, h, x1, y1, x2, y2) {
    pointX1 = x1;
    pointY1 = y1;
    pointX2 = x2;
    pointY2 = y2;
    width = w;
    height = h;

    // get selected file
    var oFile = $('#' + image_file)[0].files[0];

    // hide all errors
    $('#jcropError').hide();

    // check for image type (jpg and png are allowed)
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (!rFilter.test(oFile.type)) {
        $('#jcropError').html('Selezionare una immagine valida (jpg e png sono ammesse)').show();
        return;
    }

    // check for file size
    //if (oFile.size > 250 * 1024) {
    //    $('#jcropError').html('You have selected too big file, please select a one smaller image file').show();
    //    return;
    //}

    // preview element
    var oImage = document.getElementById('jcropPreview');

    // prepare HTML5 FileReader
    var oReader = new FileReader();
    oReader.onload = function (e) {

        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        oImage.onload = function () { // onload event handler

            // display step 2
            $('#jcropStep2').fadeIn(500);

            // display some basic image info
            var sResultFileSize = bytesToSize(oFile.size);
            
            // destroy Jcrop if it is existed
            if (typeof jcrop_api != 'undefined') {
                jcrop_api.destroy();
                jcrop_api = null;
                $('#jcropPreview').width(oImage.naturalWidth);
                $('#jcropPreview').height(oImage.naturalHeight);
            }            

            setTimeout(function () {
                // initialize Jcrop
                $('#jcropPreview').Jcrop({
                    boxWidth: 600,
                    boxHeight: 600,
                    aspectRatio: 1, // keep aspect ratio 1:1
                    bgFade: true, // use fade effect
                    bgOpacity: .3, // fade opacity
                    onChange: updateInfo,
                    onSelect: updateInfo,
                    trueSize: [600,600]
                }, function () {

                    // use the Jcrop API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];

                    // Store the Jcrop API in the jcrop_api variable
                    jcrop_api = this;
                    jcrop_api.animateTo([100, 100, 400, 300]);
                    jcrop_api.setOptions({ aspectRatio: 4 / 3 });
                });
            }, 3000);

        };
    };

    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}

Grazie mille

[m4rko80]

Ciao, secondo me potresti ovviare la cosa o ricreando l'immagine nelle dimensioni massime consentite.
Ad esempio se le immagini in upload non devono superare 1024 x ... farai un upload dell'immagine, generi il formato a 1024 x.. e mostri il tuo contenitore a 1024x.. in questo modo saranno corrette.
In alternativa dovresti calcolarti le proporzioni fra il contenitore usato per l'utente e le dimensioni orginali. Il contenitore ovviamente non dovrebbe essere strecchato rispetto l'originale.