887 messaggi dal 21 marzo 2008
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
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao,
il codice l'hai tratto da questo articolo, giusto?
http://www.script-tutorials.com/html5-image-uploader-with-jcrop/

Mi sembra che le coordinate vengano calcolate in base alle dimensioni attuali del tag <img>. Infatti, guarda questo fiddle:
http://jsfiddle.net/L6gato5n/

Quando traccio il ritaglio, a me escono numeri piccoli per le coordinate, nonostante l'immagine originale fosse molto grande, magari di qualche migliaio di pixel.

All'immagine ho dato max-width:100%; che penso sia la stessa regola data dalla tua classe img-response.

La versione di jcrop usata in quel fiddle è quella presa dal CDN.
http://it.cdnjs.com/libraries/jquery-jcrop

Ho capito bene, a te invece si verifica l'opposto? Cioè tu hai numeri molto grandi anche se l'immagine è contenuta in uno spazio ristretto?

Gemini78 ha scritto:

C'è un modo per ridimensionare un'immagine con le api di html5

Sì, attraverso la API della canvas ma non lo fare solo per risolvere questo problema. Meglio che lo fai lato server. Ridimensionare grosse immagini lato client può bloccare la UI per un breve lasso di tempo.

Gemini78 ha scritto:

Ho trovato trueSize

Sì, secondo la documentazione di jcrop puoi usare trueSize per indicare esplicitamente la dimensione del quadro di riferimento.
Ecco una variante del fiddle di prima in cui trueSize viene impostato alle dimensioni naturali dell'immagine.
http://jsfiddle.net/L6gato5n/1/

Penso che sia preferibile quest'ultimo sistema, così ti ritrovi già delle coordinate relative alle dimensioni reali dell'immagine. Sarà più immediato farne il cropping, lato server. Non dovrai fare alcun calcolo.
Dopo aver fatto il cropping, la ridimensioni.

ciao,
Moreno.

Enjoy learning and just keep making

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.