Как обрезать изображение в canvas?

Question

[Genri_Rus]

Вот пример: vintagetechnics.ru/comment

При клике на добавить свой отзыв можно добавить картинку и она с помощью canvas загрузится в виде превью

Я сделал что-то похожее: https://codepen.io/Genri_Rus/pen/vYLGxzV

Но проблема в том, что она сильно сжимается, пример картинки:

spoiler

А как сделать точно также ?


Т.е. она незначительно обрезана сверху и снизу

Answer 1

[profesor08]

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

img.onload = function() {
  canvas.width  = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
};

Comments

[Genri_Rus]

Я сделал так: https://codepen.io/Genri_Rus/pen/vYLGxzV

Но теперь у меня картинка 500x500, а мне нужно: 90x60 с сохранением пропорций

[profesor08]

Genri_Rus,

Далее на CSS задать на canvas нужный размер, чтоб вписывался нормально в блок.

[Genri_Rus]

profesor08, Я задал через css 90x60 эффект точно такой же, что и при таком варианте:

<canvas width="90" height="60"></canvas>

[profesor08]

Genri_Rus,

CSS задать на canvas

[Genri_Rus]

profesor08, ну я задал, а у вас по-другому ?

И почему тут css не задан ?

vintagetechnics.ru/comment

[profesor08]

Genri_Rus,

ну я задал, а у вас по-другому ?

видимо нет

[Genri_Rus]

profesor08, у меня разницы нету:

https://codepen.io/Genri_Rus/pen/ZEQWKgM

[profesor08]

Genri_Rus,

canvas {
  width: auto; // пропорционально подберет ширину
  height: 60px;
}

[Genri_Rus]

profesor08, тогда картинка становится меньше:

[profesor08]

Genri_Rus, ну выстави нужную высоту

[Genri_Rus]

profesor08, выставить в css ?