Question

谢谢你看看。

我在这里要做的是......从计算机加载图像（使用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（ '画布'）的高度）;

它有效，但图像质量变得非常糟糕......因为它不是原始图像尺寸。它被调整到一定的高度并被迫调整大小。

我想做的就是......保持原始画布大小（宽度：某些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);

同样，原始图像返回...和图像的“部分”显示在画布中。画布的大小是我想要的......

Answer 1

非常感谢你看看这个问题。特别是@Kaiido试图提供帮助。谢谢。我对这个stackoverflow真的很陌生......所以我不知道如何创建demo。

我找到了解决方案。嗯......这是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，图像将被调整大小，它将被绘制到画布中。如果它大于画布大小，它将只显示＆＃34; part＆＃34;你的形象。

所以我做的是...获取我希望放置画布的div宽度大小。然后首先计算图像的比率（比率=图像的高度/图像的宽度）。然后将画布大小设置为以下（ctx.canvas.width = div width size，ctx.canvas.height = div width size * ratio）。然后使用canva的宽度和高度绘制画布（ctx.drawImage（img，0,0，ctx.canvas.width，ctx.canvas.height））。

希望这可以帮助像我这样的新人:)谢谢你。

HTML 5 Canvas]调整大小时的图像质量

1 个答案: