调整画布内的图像 [英] Adjust image inside a canvas

问题描述

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

我正在尝试生成图像。从图像中，我将其转换为dataImage，然后将其编码为图像。然后将其放在canvas元素内。宽度的大小将为300px，高度的大小将为311px。但是图像没有重新缩放。我该如何解决？

解决方案

您需要等待图像加载后才能对其进行修改。渲染时，必须以所需大小渲染它。 drawImage 函数具有多个版本，其中一个是 ctx.drawImage（image，x，y，width，height）它将以 x ， y 和大小为 width ，高度。

  const canvas = document.getElementById （结果）; 
 const ctx = canvas.getContext（’2d’）; 
常量宽度= 300; 
 const height = 311; 
 const image = new Image; 
 image.src =‘http://tosemdinheiro.com/wp-content/uploads/2012/10/carro.jpg’； 
 image.onload = function（）{//等待图像加载
 ctx.canvas.width = width; //设置大小
 ctx.canvas.height =高度； 
 ctx.drawImage（image，0,0，width，height）; //以大小
 
绘制图像//不知道为什么要执行以下操作，因此将其删除
 // const imageData = res_ctx.getImageData（0，0，width，height）; 
 
 //创建新图像
 const imageGif = new Image; 
 imageGif.src = canvas.toDataURL（）; // image / png是默认的MIME类型
 document.querySelector（。frames）。appendChild（imageGif）; 
} 
  

Resize image within canvas when generating it.

I'm trying to generate an image. From an image I convert it to a dataImage, and later I encode it to an image. and then put it inside a canvas element. The size of the width will be 300px and that of the height of 311px. But the image is not re-scaled. How can I do to fix this?

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

解决方案

You need to wait for the image to load before you can modify it. When you render it you must render it at the size you want. The drawImage function has several versions one of which is ctx.drawImage(image,x,y,width,height) which will draw the image at x,y and with a size as 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);
}

这篇关于调整画布内的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！