感谢您的关注。
我在这里要做的是...从计算机加载图像(通过使用 FileReader),将 img 标签的 src 放入文件。然后用该图像绘制 Canvas 。
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);
}
问题是当我加载另一个图像文件时。它加载在 Canvas 中,但不适合 Canvas 大小。它保持原始图像大小,图像的“部分”显示在 Canvas 中。
为了解决这个问题,我尝试了以下方法:
ctx.drawImage(img, 0, 0, document.getElementById('canvas').宽度,
document.getElementById('canvas').height);
它有效,但是图像质量变得非常糟糕......因为它不是原始图像大小。它被调整到一定高度并强制调整大小。
我想要做的就是......保持原始 Canvas 大小(宽度:一些像素;高度:自动),所以当我加载图像时,它适合 Canvas 宽度和调整后的高度。
你能帮帮我吗?谢谢。
添加我自己研究了一下,发现如下: 我想出了一个主意 - 首先根据 Canvas 的当前宽度更改图像大小。
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。但是 Canvas 的高度不知何故变成了 150px。我检查了一下, Canvas 上根本没有应用任何 css。
所以这次,我在 drawImage() 之前设置 Canvas 宽度。
ctx.canvas.width = img.width;
ctx.canvas.height = img.height;
ctx.filter = window.getComputedStyle(img).filter;
ctx.drawImage(img, 0, 0);
再次,原始图像返回...并且图像的“部分”显示在 Canvas 中。 Canvas 的大小是我想要的...
最佳答案
非常感谢您查看问题。特别是试图提供帮助的@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 是 Canvas 的宽度。 ctx.canvas.height 是 Canvas 的高度。 在 drawImage 中,那些 800s 是将要绘制的图像的宽度和高度,而不是 Canvas 的大小!因此,如果您在 drawImage 中设置...假设为 1000、1000,图像将调整为该大小,并将绘制到 Canvas 中。如果它大于 Canvas 大小,它将只显示图像的“一部分”。
所以我所做的是...获取我想要放置 Canvas 的 div 宽度大小。然后先计算图像的比例(比例=图像的高度/图像的宽度)。然后将 Canvas 大小设置为以下(ctx.canvas.width = div 宽度大小,ctx.canvas.height = div 宽度大小 * 比率)。然后使用 canva 的宽度和高度绘制 Canvas ( ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height) )。
希望这对像我这样的新手有帮助 :) 谢谢。
关于javascript - HTML 5 Canvas] 调整大小时的图像质量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42103896/