Отрегулируйте изображение внутри холста

Question

Отрегулируйте изображение внутри холста

1

Изменение размера изображения в холсте при его создании.

Я пытаюсь создать изображение. Из образа я конвертирую его в dataImage, а позже кодирую его на изображение. а затем поместите его в элемент холста. Размер ширины будет 300 пикселей, а высота - 311 пикселей. Но изображение не перемасштабировано. Как я могу это исправить?

https://jsfiddle.net/svvmrwvv/

<canvas id="result" width="300" height="310"></canvas>
<br>
<div class='frames'></div>

var res_c = document.getElementById("result");
var res_ctx = res_c.getContext('2d');
var width = 300;
var height = 311;

//codifing image

var image = new Image;
image.src = 'http://tosemdinheiro.com/wp-content/uploads/2012/10/carro.jpg';
res_ctx.drawImage(image, 0, 0);
imageData = res_ctx.getImageData(0, 0, width, height);
console.log(imageData);

//decodifing image

var image_gif = new Image();
image_gif.src  = res_c.toDataURL("image/png");
image_gif.height=width;
console.log(image_gif)
image_gif.width=height;
$(".frames").append(image_gif);

yavg 28 июль 2017, в 18:59

Источник

0

Почему вы не устанавливаете width и height в визуализированном элементе <img>
guest271314 28 июль 2017, в 18:17
0

@guest271314 guest271314 Но изображение отображается не полностью
yavg 28 июль 2017, в 18:55
0

@guest271314 guest271314 Извините, может быть, я вас не понимаю.
yavg 28 июль 2017, в 18:58
0

Где вы используете событие load Image ?
guest271314 28 июль 2017, в 22:39

Показать ещё 2 комментария

Теги:

javascript

canvas

1 ответ

Ещё вопросы

Почему вы не устанавливаете width и height в визуализированном элементе <img>
@guest271314 guest271314 Но изображение отображается не полностью
@guest271314 guest271314 Извините, может быть, я вас не понимаю.
Где вы используете событие load Image ?

Blindman67 · Accepted Answer · 2017-07-29T07-32-00.000Z

Вам нужно дождаться загрузки изображения, прежде чем вы сможете его изменить. Когда вы его визуализируете, вы должны отображать его по желаемому размеру. Функция drawImage имеет несколько версий, одна из которых - ctx.drawImage(image,x,y,width,height) которая рисует изображение по x, y и имеет размер как width, height.

const canvas = document.getElementById("result");
const ctx = canvas.getContext('2d');
const width = 300;
const height = 311;
const image = new Image;
image.src = 'http://tosemdinheiro.com/wp-content/uploads/2012/10/carro.jpg';
image.onload = function(){   // wait for the image to load
  ctx.canvas.width = width;  // set size
  ctx.canvas.height = height;
  ctx.drawImage(image,0,0,width,height);  // draw the image at size

  // Dont know why you are doing the following so removed it
  //const imageData = res_ctx.getImageData(0, 0, width, height);

  // create new image
  const imageGif = new Image;
  imageGif.src  = canvas.toDataURL(); // "image/png" is the default mime type
  document.querySelector(".frames").appendChild(imageGif);
}