HTML 5 Обрезка холста приводит к плохому качеству

Question

Я сделал быстрый пример на http://yc.sg/fantaspic/compare.html. Это уродливо и просто для функций. Он использует FileAPI, ничего для отправки на сервер, поэтому не стесняйтесь использовать любую фотографию: P. Хорошо, чтобы использовать его, просто просмотрите, выберите фотографию и нажмите «ОК», затем обрежьте.

Изображение в левом нижнем углу перерисовывается с использованием холста HTML 5 (с исходным изображением в качестве источника), в то время как изображение в нижнем правом углу - это просто div с перемещением исходного изображения. Изображение холста всегда приводит к более низкому качеству, хотя это просто обрезка.

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

function preview(img, selection) {
        var scaleX = previewWidth / selection.width; 
        var scaleY = previewHeight / selection.height; 

        $('#cropped-image').css({ 
            width: Math.round(scaleX * truew) + 'px', 
            height: Math.round(scaleY * trueh) + 'px',
            marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
            marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
        });

        selx1 = selection.x1;
        sely1 = selection.y1;
        selx2 = selection.x2;
        sely2 = selection.y2;
        selw = selection.width;
        selh = selection.height;

        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");
        context.drawImage(img, selx1, sely1, selw, selh, 0, 0, canvas.width, canvas.height);
}

Answer 1

HTML5-элементам холста присваиваются свойства width и height , которые устанавливают область просмотра холста.Оба эти свойства не совпадают с их аналогами CSS.

Рассмотрим обычное растровое изображение.Размер изображения фиксирован и не может быть изменен в браузере.Однако свойства css width и height позволяют масштабировать и искажать изображение.Иногда это не красиво, потому что браузеры, как правило, используют простые алгоритмы изменения размера.

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

В вашем случае изображение холста немного масштабируется, потому что ваши значения CSS (320, 320) отличаются от значений области просмотра по умолчанию (300300).Просто попробуйте настроить окно просмотра заранее, и все должно выглядеть хорошо.

$(function () {
  var $preview = $("#preview"), 
      preview = $preview[0];

  preview.width  = $preview.width();
  preview.height = $preview.height();
});