Нанесение изображения на холст - больше реального

Я хочу нарисовать изображение из файла jpg на холсте. Мой код:

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0);
  };
  imageObj.src = 'img/my_image.jpg';

Проблема в том, что изображение на холсте намного больше, чем в файле. Почему? Как я могу нарисовать изображение реального размера?

ОБНОВЛЕНИЕ: результат: http://jsfiddle.net/AJK2t/


javascript canvas html drawimage
person latata    schedule 03.04.2013    source источник

Ответы (3)


arrow_upward
43
arrow_downward

Это ваша проблема:

<canvas style="width: 700px; height: 400px;" id="konf"></canvas>

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

Самое простое исправление:

<canvas width="700" height="400" id="konf"></canvas>

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

Скопируйте/вставьте из мой ответ на связанный вопрос:

Подумайте о том, что произойдет, если у вас есть файл JPG размером 32x32 (всего ровно 1024 пикселя), но с помощью CSS укажите, что он должен отображаться как width:800px; height:16px. То же самое относится и к HTML Canvas:

  • Атрибуты width и height самого элемента холста определяют, сколько пикселей вы можете рисовать. Если вы не укажете высоту и ширину элемента холста, то согласно спецификациям:
    "атрибут ширины по умолчанию равен 300, а атрибут высоты по умолчанию равен 150."

  • Свойства CSS width и height управляют размером, отображаемым на экране. Если размеры CSS не заданы, для макета используется внутренний размер элемента.

Если вы укажете в CSS размер, отличный от фактических размеров холста, он должен быть растянут и сжат браузером по мере необходимости для отображения. Вы можете увидеть пример здесь: http://jsfiddle.net/9bheb/5/

person Phrogz    schedule 03.04.2013

arrow_upward
3
arrow_downward

Рабочий пример: http://jsfiddle.net/jzF5R/

Чтобы масштабировать изображение, вам нужно указать ширину и высоту масштабирования, которые вы хотите ctx.drawImage():

// x, y, width, height
ctx.drawImage(imageObj, 0, 0, 100, 50);

Сохранить исходный размер изображения:

ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);

Не допускайте выхода холста за пределы страницы:

ctx.canvas.width = document.body.clientWidth;

Вы можете легко масштабировать ширину и высоту изображения до 70% от оригинала:

ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7);
person Alex W    schedule 03.04.2013
comment
... и если вы масштабируете, вы, вероятно, захотите масштабировать пропорционально ширине/высоте изображения, чтобы не сжимать изображение;) - person markE; 03.04.2013
comment
ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height); это не работа для меня. проверьте: jsfiddle.net/AJK2t - person latata; 03.04.2013
comment
@Alex W: Я был уверен, что ты знаешь ... просто хотел, чтобы OP тоже знал :) - person markE; 04.04.2013
comment
Ваше предложение уменьшит масштаб изображения, но при этом OP потеряет пиксели. Правильный ответ - принятый. - person cherouvim; 05.08.2014
comment
я не уверен, почему, но когда я пытаюсь это сделать, изображение на холсте имеет размер файла больше, чем оригинал ... независимо от того, что я пробовал ... единственный способ сделать его меньше исходного размера изображения ... я потерять столько деталей, что это ужасно... - person carinlynchin; 20.10.2016

arrow_upward
0
arrow_downward

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

//get size from CSS
var sizeWidth = context.canvas.clientWidth;   
var sizeHeight = context.canvas.clientHeight;   
//here the solution, it replaces HTML width="" height=""
canvas.width = sizeWidth;
canvas.height = sizeHeight;
...........
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, sizeWidth, sizeHeight);

Изображение полностью содержится в холсте, независимо от размера холста (соотношение между высотой и шириной не сохраняется, но это не имеет значения, height:auto; в css может это исправить).

И вуаля !

person flgk    schedule 12.04.2015