Блог

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

Изображение в левом нижнем углу перерисовано с использованием холста 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);
}
  

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

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

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

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

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

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