调整画布内的图像

Question

生成画布时调整画布大小。

我试图生成图片。从图像我将其转换为dataImage，然后我将其编码为图像。然后将它放在canvas元素中。宽度的大小为300px，高度为311px。但图像不会重新缩放。我该怎么做才能解决这个问题？

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);  

Answer 1

您需要等待图像加载才能修改它。渲染时，必须以所需的大小渲染它。 drawImage函数有多个版本，其中一个是ctx.drawImage(image,x,y,width,height)，它将在x，y绘制图像，大小为width，{{1 }}

height