时间戳

首页 > 解决方案 > 如何从文件输入显示图片到画布

javascript - 如何从文件输入显示图片到画布

问题描述

我有以下代码：

索引.html

<!DOCTYPE html>
<html>
<head>
<!-- meta, title, etc -->
</head>
<body>
<input type="file" accept="image/*" id="imgin" /> <br />
<canvas id="canvas"></canvas>
<script type="text/javascript" src="./scripts/main.js"></script>
</body>
</html>

main.js

const imgin = document.getElementById('imgin');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
imgin.addEventListener('change', drawimage);
function drawimage() {
//draw_image
}

现在，我想在选择时在画布上绘制图像。我该怎么做？

我发现的只是没有从<input>标签中放置图像。

标签： javascripthtmlimagefilecanvas

解决方案

这是jsfiddle：单击。

使用的 HTML：

<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>

用过的JS：

var input = document.getElementById('input');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
        ctx.drawImage(img, 0, 0, 400, 300);
    }
}

推荐阅读