Szybka próba płótna z dobrą jakością: http://jsfiddle.net/9g9Nv/442/

Update: version 2.0 (faster, web workers + transferable objects) - https://github.com/viliusle/Hermite-resize

/**
 * Hermite resize - fast image resize/resample using Hermite filter. 1 cpu version!
 * 
 * @param {HtmlElement} canvas
 * @param {int} width
 * @param {int} height
 * @param {boolean} resize_canvas if true, canvas will be resized. Optional.
 */
function resample_single(canvas, width, height, resize_canvas) {
    var width_source = canvas.width;
    var height_source = canvas.height;
    width = Math.round(width);
    height = Math.round(height);

    var ratio_w = width_source / width;
    var ratio_h = height_source / height;
    var ratio_w_half = Math.ceil(ratio_w / 2);
    var ratio_h_half = Math.ceil(ratio_h / 2);

    var ctx = canvas.getContext("2d");
    var img = ctx.getImageData(0, 0, width_source, height_source);
    var img2 = ctx.createImageData(width, height);
    var data = img.data;
    var data2 = img2.data;

    for (var j = 0; j < height; j++) {
        for (var i = 0; i < width; i++) {
            var x2 = (i + j * width) * 4;
            var weight = 0;
            var weights = 0;
            var weights_alpha = 0;
            var gx_r = 0;
            var gx_g = 0;
            var gx_b = 0;
            var gx_a = 0;
            var center_y = (j + 0.5) * ratio_h;
            var yy_start = Math.floor(j * ratio_h);
            var yy_stop = Math.ceil((j + 1) * ratio_h);
            for (var yy = yy_start; yy < yy_stop; yy++) {
                var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half;
                var center_x = (i + 0.5) * ratio_w;
                var w0 = dy * dy; //pre-calc part of w
                var xx_start = Math.floor(i * ratio_w);
                var xx_stop = Math.ceil((i + 1) * ratio_w);
                for (var xx = xx_start; xx < xx_stop; xx++) {
                    var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half;
                    var w = Math.sqrt(w0 + dx * dx);
                    if (w >= 1) {
                        //pixel too far
                        continue;
                    }
                    //hermite filter
                    weight = 2 * w * w * w - 3 * w * w + 1;
                    var pos_x = 4 * (xx + yy * width_source);
                    //alpha
                    gx_a += weight * data[pos_x + 3];
                    weights_alpha += weight;
                    //colors
                    if (data[pos_x + 3] < 255)
                        weight = weight * data[pos_x + 3] / 250;
                    gx_r += weight * data[pos_x];
                    gx_g += weight * data[pos_x + 1];
                    gx_b += weight * data[pos_x + 2];
                    weights += weight;
                }
            }
            data2[x2] = gx_r / weights;
            data2[x2 + 1] = gx_g / weights;
            data2[x2 + 2] = gx_b / weights;
            data2[x2 + 3] = gx_a / weights_alpha;
        }
    }
    //clear and resize canvas
    if (resize_canvas === true) {
        canvas.width = width;
        canvas.height = height;
    } else {
        ctx.clearRect(0, 0, width_source, height_source);
    }

    //draw
    ctx.putImageData(img2, 0, 0);
}

Sugestia 1-rozszerz rurę procesową

Możesz użyć stopniowania, jak opisuję w linkach, do których się odwołujesz, ale wydaje się, że używasz ich w niewłaściwy sposób.

Krok w dół nie jest potrzebny do skalowania obrazów do proporcji powyżej 1: 2 (zazwyczaj, ale nie wyłącznie). To miejsce, w którym musisz wykonać drastyczne skalowanie w dół, musisz podzielić je na dwa (i rzadko więcej) kroki w zależności od zawartości obrazu (w szczególności w przypadku wysokich częstotliwości, takich jak cienkie linie występuje).

Za każdym razem, gdy próbkujesz obraz, tracisz szczegóły i informacje. Nie można oczekiwać, że wynikowy obraz będzie tak wyraźny jak oryginał.

Jeśli skalujesz obrazy w wielu krokach, stracisz w sumie wiele informacji, a wynik będzie słaby, jak już zauważyłeś.

Convolutions

W przypadku Photoshopa zauważ, że stosuje on splot po tym, jak obraz ma zostały ponownie pobrane próbki, takie jak sharpen. Nie chodzi tylko o interpolację dwu-sześcienną, więc aby w pełni emulować Photoshopa, musimy również dodać kroki, które wykonuje Photoshop (z domyślną konfiguracją).

W tym przykładzie użyję mojej oryginalnej odpowiedzi, do której odnosisz się w swoim poście, ale dodałem do niej splot wyostrzający, aby poprawić jakość jako proces postu(patrz demo na dole).

Oto kod do dodania filtra sharpen (bazuje on na ogólnym filtrze splotowym-wstawiam macierz wagowa do wyostrzania wewnątrz niej, a także czynnik mieszający do regulacji wymowy efektu):

Użycie:

sharpen(context, width, height, mixFactor);

mixFactor jest wartością pomiędzy [0.0, 1.0] i pozwala na pomniejszenie Zasady wyostrzania efektu: im mniejszy rozmiar, tym mniejszy efekt jest potrzebny.

Function (based on this snippet):

function sharpen(ctx, w, h, mix) {

    var weights =  [0, -1, 0,  -1, 5, -1,  0, -1, 0],
        katet = Math.round(Math.sqrt(weights.length)),
        half = (katet * 0.5) |0,
        dstData = ctx.createImageData(w, h),
        dstBuff = dstData.data,
        srcBuff = ctx.getImageData(0, 0, w, h).data,
        y = h;

    while(y--) {

        x = w;

        while(x--) {

            var sy = y,
                sx = x,
                dstOff = (y * w + x) * 4,
                r = 0, g = 0, b = 0, a = 0;

            for (var cy = 0; cy < katet; cy++) {
                for (var cx = 0; cx < katet; cx++) {

                    var scy = sy + cy - half;
                    var scx = sx + cx - half;

                    if (scy >= 0 && scy < h && scx >= 0 && scx < w) {

                        var srcOff = (scy * w + scx) * 4;
                        var wt = weights[cy * katet + cx];

                        r += srcBuff[srcOff] * wt;
                        g += srcBuff[srcOff + 1] * wt;
                        b += srcBuff[srcOff + 2] * wt;
                        a += srcBuff[srcOff + 3] * wt;
                    }
                }
            }

            dstBuff[dstOff] = r * mix + srcBuff[dstOff] * (1 - mix);
            dstBuff[dstOff + 1] = g * mix + srcBuff[dstOff + 1] * (1 - mix);
            dstBuff[dstOff + 2] = b * mix + srcBuff[dstOff + 2] * (1 - mix)
            dstBuff[dstOff + 3] = srcBuff[dstOff + 3];
        }
    }

    ctx.putImageData(dstData, 0, 0);
}

Wynikiem użycia tej kombinacji będzie:

DEMO ONLINE Tutaj

W zależności od tego, ile ostrzenia chcesz dodać do mieszanki, możesz uzyskać wynik z domyślnego "rozmytego"do bardzo ostrego:

Sugestia 2 - implementacja algorytmu niskiego poziomu

Jeśli chcesz uzyskać najlepszy wynik pod względem jakości, musisz przejść niski poziom i rozważyć wdrożenie na przykład tego nowego algorytmu, aby to zrobić.

Zobacz Interpolacja-dependent Image Downsampling (2011) z IEEE.
oto link do artykułu w całości (PDF) .

Nie ma implementacji tego algorytmu w JavaScript AFAIK w tej chwili, więc jesteś na pełne ręce, jeśli chcesz rzucić się na to zadanie.

Istotą jest (fragmenty artykułu):

Abstract

Proponowany jest algorytm adaptacyjnego próbkowania w dół zorientowanego interpolacyjnie do kodowania obrazów o niskiej przepływności w tym artykule. Given an image, the proponowany algorytm jest w stanie uzyskać obraz o niskiej rozdzielczości, z który obraz wysokiej jakości o tej samej rozdzielczości co wejście obraz może być interpolowany. Różni się od tradycyjnych algorytmy down-samplingu, które są niezależne od procesu interpolacji, proponowany algorytm próbkowania w dół pobieranie próbek w dół do procesu interpolacji. W związku z tym proponowany algorytm down-samplingu jest w stanie utrzymać oryginalny informacje o obrazie wejściowym w największym stopniu. The down-sampled obraz jest następnie przesyłany do formatu JPEG. A total variation (TV) based post przetwarzanie jest następnie stosowane do zdekompresowanego obrazu o niskiej rozdzielczości. Ostatecznie przetworzony obraz jest interpolowany w celu utrzymania oryginalna rozdzielczość obrazu wejściowego. wyniki eksperymentalne że wykorzystując obraz downsamplowany przez proponowany algorytm, można uzyskać obraz interpolowany o znacznie wyższej jakości. Poza tym, proponowany algorytm jest w stanie osiągnąć lepsze wydajność niż JPEG do kodowania obrazu o niskiej przepływności.

(Zobacz podany link dla wszystkich szczegółów, formuł itp.)

Po co używać płótna do zmiany rozmiaru obrazów? Współczesne przeglądarki używają interpolacji bicubic - tego samego procesu używanego przez Photoshopa (jeśli robisz to dobrze) - i robią to szybciej niż proces canvas. Po prostu określ żądany rozmiar obrazu (użyj tylko jednego wymiaru, wysokości lub szerokości, aby proporcjonalnie zmienić rozmiar).

Jest to obsługiwane przez większość przeglądarek, w tym nowsze wersje IE. Wcześniejsze wersje mogą wymagać specyficznego dla przeglądarki CSS .

Prosta funkcja (za pomocą jQuery) do zmiana rozmiaru obrazu będzie następująca:

function resizeImage(img, percentage) {
    var coeff = percentage/100,
        width = $(img).width(),
        height = $(img).height();

    return {"width": width*coeff, "height": height*coeff}           
}

EDIT zmieniono image na img, aby dopasować args funkcji. ^)^

Następnie użyj zwracanej wartości, aby zmienić rozmiar obrazu w jednym lub obu wymiarach.

Oczywiście są różne ulepszenia, które możesz zrobić, ale to załatwia sprawę.

Dodatek

Wklej poniższy kod do konsoli tej strony i obserwuj, co dzieje się z gravatarami:

function resizeImage(img, percentage) {
    var coeff = percentage/100,
        width = $(img).width(),
        height = $(img).height();

    return {"width": width*coeff, "height": height*coeff}           
}

$('.user-gravatar32 img').each(function(){
  var newDimensions = resizeImage( this, 150);
  this.style.width = newDimensions.width + "px";
  this.style.height = newDimensions.height + "px";
});

Jeśli chcesz używać tylko canvas, najlepszy wynik będzie z wieloma downstepami. Ale to jeszcze nie jest dobre enougth. Dla lepszej jakości potrzebujesz czystej implementacji js. Właśnie wypuściliśmy pica - Szybki downscaler o zmiennej jakości / prędkości. Krótko mówiąc, zmienia rozmiar 1280*1024px w ~0.1 s, a obraz 5000*3000px w 1s, z najwyższą jakością (filtr lanczos z 3 płatami). Pica ma demo , w którym możesz grać swoimi obrazami, poziomami jakości, a nawet wypróbować je na urządzeniach mobilnych urządzenia.

Pica nie ma jeszcze maski unsharp, ale zostanie ona dodana wkrótce. Jest to o wiele łatwiejsze niż zaimplementowanie szybkiego filtra splotowego do zmiany rozmiaru.

Nie jest to właściwa odpowiedź dla osób, które naprawdę potrzebują zmienić rozmiar samego obrazu, ale tylko po to, aby zmniejszyć rozmiar pliku .

Miałem problem ze zdjęciami "bezpośrednio z aparatu", które moi klienci często przesyłali w "nieskompresowanym" formacie JPEG.

Nie jest tak dobrze znany, że canvas obsługuje (w większości przeglądarek 2017), aby zmienić jakość JPEG

data=canvas.toDataURL('image/jpeg', .85) # [1..0] default 0.92

Dzięki tej sztuczce mógłbym zredukować zdjęcia 4k x 3K z >10MB do 1 lub 2MB, na pewno zależy to od Twojego potrzeb.

Zobacz tutaj

Oto usługa kątowa wielokrotnego użytku dla wysokiej jakości obrazu / płótna zmiany rozmiaru: https://gist.github.com/fisch0920/37bac5e741eaec60e983

Przykładowe użycie:

angular.module('demo').controller('ExampleCtrl', function (imageService) {
  // EXAMPLE USAGE
  // NOTE: it's bad practice to access the DOM inside a controller, 
  // but this is just to show the example usage.

  // resize by lanczos-sinc filter
  imageService.resize($('#myimg')[0], 256, 256)
    .then(function (resizedImage) {
      // do something with resized image
    })

  // resize by stepping down image size in increments of 2x
  imageService.resizeStep($('#myimg')[0], 256, 256)
    .then(function (resizedImage) {
      // do something with resized image
    })
})

Jest to ulepszony filtr zmiany rozmiaru Hermite, który wykorzystuje 1 worker, aby okno nie zamarzało.

Https://github.com/calvintwr/Hermite-resize

Znalazłem rozwiązanie, które nie wymaga bezpośredniego dostępu do danych pikseli i pętli przez nie, aby wykonać próbkowanie w dół. W zależności od rozmiaru obrazu może to być bardzo zasobochłonne i lepiej byłoby użyć wewnętrznych algorytmów przeglądarki.

Funkcja drawImage () wykorzystuje metodę interpolacji liniowej, resamplingu najbliższego sąsiada. To działa dobrze, gdy nie zmieniasz rozmiaru o więcej niż połowę oryginalnego rozmiaru .

Jeśli zapętlisz do tylko Zmień rozmiar maksymalnie o połowę na raz, wyniki byłyby całkiem dobre i znacznie szybsze niż dostęp do danych pikseli.

Ta funkcja zmniejsza się do połowy w czasie, aż do osiągnięcia pożądanego rozmiaru:

  function resize_image( src, dst, type, quality ) {
     var tmp = new Image(),
         canvas, context, cW, cH;

     type = type || 'image/jpeg';
     quality = quality || 0.92;

     cW = src.naturalWidth;
     cH = src.naturalHeight;

     tmp.src = src.src;
     tmp.onload = function() {

        canvas = document.createElement( 'canvas' );

        cW /= 2;
        cH /= 2;

        if ( cW < src.width ) cW = src.width;
        if ( cH < src.height ) cH = src.height;

        canvas.width = cW;
        canvas.height = cH;
        context = canvas.getContext( '2d' );
        context.drawImage( tmp, 0, 0, cW, cH );

        dst.src = canvas.toDataURL( type, quality );

        if ( cW <= src.width || cH <= src.height )
           return;

        tmp.src = dst.src;
     }

  }
  // The images sent as parameters can be in the DOM or be image objects
  resize_image( $( '#original' )[0], $( '#smaller' )[0] );

Podziękowania dla ten post

context.scale(xScale, yScale)

<canvas id="c"></canvas>
<hr/>
<img id="i" />

<script>
var i = document.getElementById('i');

i.onload = function(){
    var width = this.naturalWidth,
        height = this.naturalHeight,
        canvas = document.getElementById('c'),
        ctx = canvas.getContext('2d');

    canvas.width = Math.floor(width / 2);
    canvas.height = Math.floor(height / 2);

    ctx.scale(0.5, 0.5);
    ctx.drawImage(this, 0, 0);
    ctx.rect(0,0,500,500);
    ctx.stroke();

    // restore original 1x1 scale
    ctx.scale(2, 2);
    ctx.rect(0,0,500,500);
    ctx.stroke();
};

i.src = 'https://static.md/b70a511140758c63f07b618da5137b5d.png';
</script>