быстрая повторная выборка холста с хорошим качеством:http://jsfiddle.net/9g9Nv/442/

обновление: версия 2.0 (быстрее, веб-работники + переносимые объекты) -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);
}

предложение 1-расширить технологический трубопровод

вы можете использовать шаг вниз, как я описываю в ссылках, на которые вы ссылаетесь, но вы, кажется, используете их неправильно.

шаг вниз не требуется для масштабирования изображений в соотношениях выше 1: 2 (как правило, но не ограничиваясь). Именно там вам нужно сделать кардинальные down-scaling вам нужно разделить его на два (и редко, больше) шага в зависимости от содержимого изображения (в частности, где высокие частоты, такие как тонкие линии происходить.)

каждый раз, когда вы вниз-образец изображения вы потеряете данные и информация. Вы не можете ожидать, что результирующее изображение будет таким же четким, как оригинал.

если вы затем масштабирование изображений во многих шагах вы потеряете много информации в общей сложности, и результат будет плохим, как вы уже заметили.

попробуйте только с одним дополнительным шагом, или в верхней части два.

сверток

в случае Photoshop обратите внимание, что он применяет свертка после повторной выборки изображения, например резкость. Это не просто двухкубическая интерполяция, поэтому для полной эмуляции Photoshop нам нужно также добавить шаги, которые делает Photoshop (с настройкой по умолчанию).

для этого примера я буду использовать свой оригинальный ответ, который вы ссылаетесь в своем посте, но я добавил к нему сверток sharpen, чтобы улучшить качество как почтовый процесс (см. демонстрацию внизу).

вот код для добавления фильтра резкость (это на основе общего фильтра свертки - я поставил матрицу веса для резкости внутри него, а также коэффициент смешивания, чтобы настроить произношение эффекта):

использование:

sharpen(context, width, height, mixFactor);

The mixFactor - это значение между [0.0, 1.0] и позволяет вам преуменьшить эффект резкости - правило большого пальца: чем меньше размер, тем меньше эффект необходим.

функции (исходя из этот фрагмент):

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);
}

в результатом использования этой комбинации будет:

ОНЛАЙН ДЕМО ЗДЕСЬ

в зависимости от того, сколько резкости вы хотите добавить в смесь, вы можете получить результат от "размытого" по умолчанию до очень резкого:

предложение 2-реализация алгоритма низкого уровня

если вы хотите получить лучший результат по качеству, вам нужно будет перейти на низкий уровень и рассмотреть возможность реализации для пример этого совершенно нового алгоритма для этого.

посмотреть Интерполяционно-Зависимая Понижающая Дискретизация Изображения (2011) от IEEE.
вот ссылка на статью в полном объеме (PDF).

в настоящее время нет реализаций этого алгоритма в JavaScript AFAIK, поэтому вы находитесь в полной готовности, если хотите бросить себя на эту задачу.

суть есть (выдержки из бумага):

Аннотация

предложен интерполяционно-ориентированный адаптивный алгоритм нисходящей выборки для низкоскоростного кодирования изображений в этой статье. Учитывая изображение, предложенный алгоритм способен получить изображение низкого разрешения, из что высокое качество изображения с тем же разрешением, что и вход изображение может быть интерполировано. Отличается от традиционного алгоритмы вниз-забора, которые независимы от интерполяция процесс, предложенный алгоритм вниз-выборки шарниров вниз-выборка к процессу интерполяции. Следовательно, предложенный алгоритм нисходящей выборки способен поддерживать оригинал информация входного изображения в наибольшей степени. Вниз-пробы затем изображение подается в JPEG. Общая вариация (ТВ) на основе сообщения затем обработка применяется к распакованному изображению с низким разрешением. В конечном счете, обработанное изображение интерполируется для поддержания оригинальное решение входное изображение. экспериментальные результаты проверки что использовать изображение уменьшено с помощью предложенного алгоритма, интерполированное изображение с гораздо более высоким качеством может быть достигнуто. Кроме того, предложенный алгоритм способен достичь более высокой производительности, чем JPEG для низкоскоростного кодирования изображений.

(см. предоставленную ссылку для всех деталей, формул и т. д.)

зачем использовать холст для изменения размеров изображений? Современные браузеры все используют бикубическую интерполяцию - тот же процесс, который используется Photoshop (если вы делаете это правильно) - и они делают это быстрее, чем процесс холста. Просто укажите размер изображения, который вы хотите (используйте только один размер, высоту или ширину, чтобы изменить размер пропорционально).

это поддерживается большинством браузеров, включая более поздние версии IE. Более ранние версии может потребоваться специфичный для браузера CSS.

простая функция (с помощью jQuery) для изменения размера изображения будет выглядеть так:

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

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

EDIT изменить image до img чтобы соответствовать функции args. ^)^

затем просто используйте возвращенное значение для изменения размера изображения в одном или обоих измерениях.

очевидно, что есть различные уточнения, которые вы могли бы сделать, но это получает работу.

дополнительное соглашение

вставьте следующий код в консоль этой страницы и посмотрите, что случается с граватарами:

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";
});

Если вы хотите использовать только холст, лучший результат будет с несколькими downsteps. Но пока это не очень хорошо. Для лучшего качества вам нужна чистая реализация js. Мы только что выпустили pica - высокоскоростной downscaler с переменным качеством / скоростью. Вкратце, он изменяет размер 1280*1024px в ~0.1 s, и изображение 5000*3000px в 1s, с самым высокомарочным (фильтр lanczos с 3 лепестками). Пика имеет демо, где вы можете играть со своими изображениями, уровнями качества и даже попробовать его мобильные средства.

PICA еще не имеет нерезкой маски, но это будет добавлено очень скоро. Это гораздо проще, чем реализовать высокоскоростной фильтр свертки для изменения размера.

Не правильный ответ для людей, которым действительно нужно изменить размер самого изображения,но просто уменьшить размер файла.

У меня была проблема с фотографиями "прямо с камеры", которые мои клиенты часто загружали в "несжатый" JPEG.

Не так хорошо известно, что canvas поддерживает (в большинстве браузеров 2017) изменение качества JPEG

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

С помощью этого трюка я мог бы уменьшить 4K x 3K pics с >10 МБ до 1 или 2 Мб, конечно, это зависит на ваши нужды.

посмотреть здесь

вот многоразовый угловой сервис для изменения размера изображения / холста высокого качества:https://gist.github.com/fisch0920/37bac5e741eaec60e983

сервис поддерживает свертку lanczos и пошаговое масштабирование. Метод свертки имеет более высокое качество за счет снижения скорости, в то время как поэтапный подход к масштабированию дает достаточно сглаженные результаты и значительно быстрее.

пример использования:

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
    })
})

это улучшенный фильтр изменения размера Hermite, который использует 1 работника, чтобы окно не замерзало.

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

Я нашел решение, которое не нуждается в непосредственном доступе к данным пикселей и цикле через него для выполнения понижающей дискретизации. В зависимости от размера изображения, это может быть очень ресурсоемким, и было бы лучше использовать внутренние алгоритмы браузера.

на drawImage () функция использует линейную интерполяцию, метод пересчета ближайших соседей. Это хорошо работает, когда вы не уменьшаете размер более половины оригинала размер.

Если вы циклически изменяете размер только до половины за раз, результаты будут довольно хорошими и намного быстрее, чем доступ к пиксельным данным.

эта функция понижает пример до половины за раз до достижения нужного размера:

  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] );

кредиты этот пост

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>