Быстрое перетаскивание холста с хорошим качеством: 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 (как правило, но не ограничиваясь этим). Здесь вам нужно сделать резкое масштабирование, которое вам нужно разбить на два (и редко, больше) шагов в зависимости от содержимого изображения (в частности, когда происходят высокие частоты, например, тонкие линии).

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

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

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

сверток

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

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

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

Применение:

sharpen(context, width, height, mixFactor);

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 для кодирования изображения с низкой скоростью передачи.

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

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

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

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

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

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

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

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

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

Очевидно, что вы можете внести некоторые улучшения, но это сделает работу.

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

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

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

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

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

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

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

Смотри сюда

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

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

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

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

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

angular.module('demo').controller('ExampleCtrl', function (imageService) {
  // EXAMPLE USAGE
  // NOTE: it 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
    })
})

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

Функция 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] );

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

ДЕМО: изменение размера изображений с помощью JS и HTML Canvas Demo fiddler.

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

https://jsfiddle.net/1b68eLdr/93089/

Полный код демонстрационного и метода TypeScript, который вы можете использовать в своем коде, можно найти в проекте GitHub.

https://github.com/eyalc4/ts-image-resizer

Это окончательный код:

export class ImageTools {
base64ResizedImage: string = null;

constructor() {
}

ResizeImage(base64image: string, width: number = 1080, height: number = 1080) {
    let img = new Image();
    img.src = base64image;

    img.onload = () => {

        // Check if the image require resize at all
        if(img.height <= height && img.width <= width) {
            this.base64ResizedImage = base64image;

            // TODO: Call method to do something with the resize image
        }
        else {
            // Make sure the width and height preserve the original aspect ratio and adjust if needed
            if(img.height > img.width) {
                width = Math.floor(height * (img.width / img.height));
            }
            else {
                height = Math.floor(width * (img.height / img.width));
            }

            let resizingCanvas: HTMLCanvasElement = document.createElement('canvas');
            let resizingCanvasContext = resizingCanvas.getContext("2d");

            // Start with original image size
            resizingCanvas.width = img.width;
            resizingCanvas.height = img.height;


            // Draw the original image on the (temp) resizing canvas
            resizingCanvasContext.drawImage(img, 0, 0, resizingCanvas.width, resizingCanvas.height);

            let curImageDimensions = {
                width: Math.floor(img.width),
                height: Math.floor(img.height)
            };

            let halfImageDimensions = {
                width: null,
                height: null
            };

            // Quickly reduce the size by 50% each time in few iterations until the size is less then
            // 2x time the target size - the motivation for it, is to reduce the aliasing that would have been
            // created with direct reduction of very big image to small image
            while (curImageDimensions.width * 0.5 > width) {
                // Reduce the resizing canvas by half and refresh the image
                halfImageDimensions.width = Math.floor(curImageDimensions.width * 0.5);
                halfImageDimensions.height = Math.floor(curImageDimensions.height * 0.5);

                resizingCanvasContext.drawImage(resizingCanvas, 0, 0, curImageDimensions.width, curImageDimensions.height,
                    0, 0, halfImageDimensions.width, halfImageDimensions.height);

                curImageDimensions.width = halfImageDimensions.width;
                curImageDimensions.height = halfImageDimensions.height;
            }

            // Now do final resize for the resizingCanvas to meet the dimension requirments
            // directly to the output canvas, that will output the final image
            let outputCanvas: HTMLCanvasElement = document.createElement('canvas');
            let outputCanvasContext = outputCanvas.getContext("2d");

            outputCanvas.width = width;
            outputCanvas.height = height;

            outputCanvasContext.drawImage(resizingCanvas, 0, 0, curImageDimensions.width, curImageDimensions.height,
                0, 0, width, height);

            // output the canvas pixels as an image. params: format, quality
            this.base64ResizedImage = outputCanvas.toDataURL('image/jpeg', 0.85);

            // TODO: Call method to do something with the resize image
        }
    };
}}

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

/* 
 * @parame canvas => canvas object
 * @parame rate => the pixel quality
 */
function setCanvasSize(canvas, rate) {
    const scaleRate = rate;
    canvas.width = window.innerWidth * scaleRate;
    canvas.height = window.innerHeight * scaleRate;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    canvas.getContext('2d').scale(scaleRate, scaleRate);
}

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>