Czy można zmienić rozmiar obrazu za pomocą JavaScript lub Flash?

Moje wymagania:

Użytkownik przesyłający obraz z wielkością 10 MB, chcę ponownie rozmiar obrazu na stronie klienta za pomocą JavaScript lub Flash, po zmianiezwania obrazu, należy przesłać do serwera.

Jeśli jest to możliwe, mogę uratować przepustowość.

Używam Uploadify, aby przesłać obrazy i Codeigniter po stronie serwera.

Czy istnieją inne metody, aby to zrobić?

Uwaga: Odniesienie do niektórych bibliotek jest naprawdę pomocne.

Dziękuję Ci.

3
Red 1 grudzień 2011, 16:03

2 odpowiedzi

Najlepsza odpowiedź

Tak, jest to możliwe w Flash Player 10 i nowszym.

Jest to stary post na blogu, z Gdy Flash Player 10 i Filereference.load () była nowa, z powrotem w 2008 r. I nie obejmuje wszystkich potrzebnych kroków, ale to start:

http://www.mikechambers.com/blog/2008/08/20/20/08/20/08/20/08/20/08/20/20

Prawdopodobnie musiałbyś również spojrzeć, jak zmienić rozmiar bitmapy w ActionScript, jak kodować bitmapę jako JPEG lub PNG (przy użyciu as3corelib) i jak przesłać wynik na serwerze.

Edytuj : http://www.plupload.com wydaje się mieć wsparcie do zmiany rozmiaru. Jest też http://resize-before-upload.com/

5
Lars Blåsjö 1 grudzień 2011, 15:41

Jeśli używasz JSON, aby przesłać, użyj następującego kodu

function UploadPhoto(img) {

    var uri = "http://domain/App/AppService.svc/GetImg/New";
    var imgElem = document.getElementById(img);
    var imgData = JSON.stringify(getBase64Image(imgElem));

    alert(imgData);
    $.ajax({
        url: uri,
        contentType: 'application/json',
        dataType: 'json',
        type: 'POST',
        data: imgData,
        error: function () {
            alert('failed');
        },
        success: function () {
            alert('Sucess');
        }
    });


}
function getBase64Image(imgElem) {
    var width = 100;
    var height = 150;

    // imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0, width, height);
    ctx.scale(width, height)
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
0
thamkrish 17 marzec 2014, 05:13