gpt4 book ai didi

javascript - 调整 Canvas 中图像的大小

转载 作者:行者123 更新时间:2023-12-03 02:11:39 26 4
gpt4 key购买 nike

我正在尝试加载图像并将其大小调整为 416x416。但是我仍然得到相同的图像大小。

代码:

var ctx = canvas.getContext('2d');

function readURL(input) {
if(input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {;
var image = new Image();
image.src = e.target.result
image.addEventListener("load",function(){
ctx.drawImage(image, 0, 0, 416,416)
})
}
reader.readAsDataURL(input.files[0]);
}
}

我读过很多关于此的文章,但一切都表明代码应该是正确的,我在哪里做错了?

最佳答案

如果你没有设置 Canvas 大小,你可能会遇到这样的情况。

如果未设置 Canvas 大小,则调整大小不起作用:

const width = 416;
const height = 416;

let canvas = document.querySelector('canvas')
//canvas.width = width;
//canvas.height = height;

function readURL(input) {
let ctx = canvas.getContext('2d');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {;
var image = new Image();
image.src = e.target.result
image.addEventListener("load", function() {
ctx.drawImage(image, 0, 0, width, height)
})
}
reader.readAsDataURL(input.files[0]);
}
}
<!DOCTYPE html>
<html>
<body>
<input type="file" onchange="readURL(this)" />
<canvas></canvas>
</body>
</html>

如果设置了 Canvas 大小,则调整大小可以正常工作:

const width = 416;
const height = 416;

let canvas = document.querySelector('canvas')
canvas.width = width;
canvas.height = height;

function readURL(input) {
let ctx = canvas.getContext('2d');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {;
var image = new Image();
image.src = e.target.result
image.addEventListener("load", function() {
ctx.drawImage(image, 0, 0, width, height)
})
}
reader.readAsDataURL(input.files[0]);
}
}
<!DOCTYPE html>
<html>
<body>
<input type="file" onchange="readURL(this)" />
<canvas></canvas>
</body>
</html>

关于javascript - 调整 Canvas 中图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49535725/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com