javascript - Javascript图像对象不在画布上调整大小
问题描述
我正在尝试使用此代码来调整图像大小并将它们打印在 html 画布上以便以后修改它们:
var wth = img.clientHeight / img.clientWidth;
img.width=300;
img.height=300 * wth;
ctx.drawImage(img, 0, 0);
但是,这不会改变画布上的结果。对于画布来说,它似乎仍然太大。
当我使用此代码时,正如此问题中所建议的那样,图像根本不会加载。我不知道我是用错了还是什么,但它就是不起作用。
ctx.drawImage(img, 0, 0, 300, 300 * wth);
这是我的代码:
function preview_image(event)
{
var output = document.getElementById('output_image');
var reader = new FileReader();
var ctx = output.getContext('2d');
//output.src = "/loading.gif";
reader.onload = function()
{
//output.src = reader.result;
var img = new Image(); // Create new img element
img.src = reader.result; // Set source path
img.onload = function() {
var wth = img.clientHeight / img.clientWidth;
img.width=300;
img.height=300 * wth;
ctx.drawImage(img, 0, 0);
}
}
reader.readAsDataURL(event.target.files[0]);
}
body
{
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color:#0B3861;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:995px;
margin: auto;
}
#output_image
{
margin: auto;
max-width:300px;
}
.editarea{
width: 50%;
background: #EC6C67;
margin: auto;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReturNull Photo Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<input type="file" accept="image/*" onchange="preview_image(event)"><br><br>
<div class="editarea"> <!--<img id="output_image" width="250">--> <canvas id="output_image" width="250"></canvas></div>
</div>
</body>
</html>
解决方案
我更改了ctx.drawImage
函数中的参数:
function preview_image(event)
{
var output = document.getElementById('output_image');
var reader = new FileReader();
var ctx = output.getContext('2d');
//output.src = "/loading.gif";
reader.onload = function()
{
//output.src = reader.result;
var img = new Image(); // Create new img element
img.src = reader.result; // Set source path
img.onload = function() {
var wth = img.clientHeight / img.clientWidth;
img.width=300;
img.height=300 * wth;
ctx.drawImage(img, (output.width / 2) - (img.width / 2), 0, img.width, output.height);
}
}
reader.readAsDataURL(event.target.files[0]);
}
body
{
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color:#0B3861;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:995px;
margin: auto;
}
#output_image
{
margin: auto;
max-width:300px;
}
.editarea{
width: 50%;
background: #EC6C67;
margin: auto;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReturNull Photo Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<input type="file" accept="image/*" onchange="preview_image(event)"><br><br>
<div class="editarea"> <!--<img id="output_image" width="250">--> <canvas id="output_image" width="250"></canvas></div>
</div>
</body>
</html>
推荐阅读
- airflow-scheduler - 气流插件 - 删除和重新创建同名 DAG 期间的奇怪行为
- algorithm - 比较分解时间得到素数
- linux - 如何在 linux OS 的 Hunspell 工具中为我自己的语言创建拼写检查器
- ios - 从 UILabel 文本掩码中获取 PDF
- node.js - 将耗时的任务委托给 Node.js 中的其他后台服务
- angular - 将数据显示为树角
- android - 如何使用 hashmap 迭代键值对并在 kotlin 的 recycleView 中显示?
- ios - 无法在 AppTests XCode 中加载模块“App”
- java - GitHub Actions:在 Windows 环境中缓存 Maven .m2 存储库 C\:\\Users\runneradmin\\.m2\repository:无法统计:没有这样的文件或目录
- sql-server - DAX 平均值不在日期期间