感谢您的关注。

我在这里想要做的是...从计算机上加载图像(使用FileReader),将img标签的src放到文件中。然后用该图像绘制画布。

function previewFile(){
   var preview = document.querySelector('img'); //selects the query named img
   var file    = document.querySelector('input[type=file]').files[0]; //sames as here
   var reader  = new FileReader();

   reader.onload = function () {
       preview.src = reader.result;
       drawCanvas();
   }

   if (file) {
       reader.readAsDataURL(file); //reads the data as a URL
   } else {
       preview.src = "sample.jpg";
   }
}

previewFile();  //calls the function named previewFile

window.onload = function () {drawCanvas(); };

function drawCanvas() {
var img = document.querySelector("img");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.filter = window.getComputedStyle(document.querySelector("img")).filter;
ctx.drawImage(img, 0, 0);
}


问题是当我加载另一个图像文件时。它在画布中加载,但不适合画布大小。它保持原始图像大小,并且图像的“一部分”显示在画布中。

为了解决这个问题,我尝试了以下方法:
    ctx.drawImage(img,0,0,document.getElementById('canvas')。width,
    document.getElementById('canvas')。height);

它可以工作,但是图像质量真的很差……因为它不是原始图像尺寸。它被调整到一定的高度,并被迫调整大小。

我要做的就是...保持原始画布大小(宽度:px;高度:自动),因此当我加载图像时,它适合画布的宽度和调整后的高度。

你能帮我吗?谢谢。

添加

我研究了一下,发现以下几点:
我想出了一个主意-首先根据画布的当前宽度更改图像大小。

var img = document.querySelector("img");
var canvas = document.getElementById("image");

var ratio = img.height / img.width;
img.width = canvas.offsetWidth;
img.height = img.width * ratio;


然后用编辑后的图像绘制。

var ctx = canvas.getContext('2d');
ctx.filter = window.getComputedStyle(img).filter;
ctx.drawImage(img, 0, 0, img.width, img.height);


然后我发现了问题。我检查了“ img.height”变量是否为199px。但是画布的高度以某种方式变为150px。我检查了一下,根本没有将CSS应用于画布。

所以这一次,我在drawImage()之前设置了画布宽度。

ctx.canvas.width = img.width;
ctx.canvas.height = img.height;
ctx.filter = window.getComputedStyle(img).filter;
ctx.drawImage(img, 0, 0);


再次,原始图像回来了……图像的“一部分”显示在画布中。画布的大小是我想要的...

最佳答案

非常感谢您看这个问题。尤其是试图帮助的@Kaiido。谢谢。我对这个stackoverflow真的很陌生...所以我不知道如何创建演示。

我找到了解决方案。嗯,这确实是Canvas的基础知识,但是我认为许多人会忘记/错过以下内容:

var ctx = canvas.getContext('2d');
ctx.canvas.width = 1000;
ctx.canvas.height = 1000;
ctx.drawImage(img, 0, 0, 800, 800);


ctx.canvas.width是画布的宽度。 ctx.canvas.height是画布的高度。
在drawImage中,将绘制800的宽度和高度,而不是画布的尺寸!因此,如果您设置...比​​如说在drawImage中设置为1000、1000,则图像将被调整为相应大小,并将其绘制到画布中。如果大于画布大小,它将仅显示图像的“一部分”。

所以我要做的是...获得div宽度大小,并将其放置在画布上。然后首先计算图像的比例(比例=图像的高度/图像的宽度)。然后将画布大小设置为以下大小(ctx.canvas.width = div宽度大小,ctx.canvas.height = div宽度大小* ratio)。然后用canva的宽度和高度(ctx.drawImage(img,0,0,ctx.canvas.width,ctx.canvas.height))绘制画布。

希望这对像我这样的新人有所帮助:)谢谢。

07-24 09:44
查看更多