我在一个用于绘制图像的网络应用程序中工作。我使用 CANVAS 元素和 JavaScript 在其上绘图，但有一个问题：如何从用户的 PC 加载图像并将其绘制在画布上？我不想保存在服务器上，只想保存在网页上。
这是代码的简化版本：
HTML：
Open file: <input type="file" id="fileUpload" accept="image/*" /><br />
<canvas id="canvas" onmousemove="keepLine()" onmouseup="drawLine()" onmousedown="startLine()" width="900" height="600" style="background-color:#ffffff;cursor:default;">
Please open this website on a browser with javascript and html5 support.
</canvas>
JavaScript：
var x = 0;
var y = 0;
var clicked = false;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineCap = "round";
canvas.addEventListener('mousemove', function(e) { getMousePos(canvas, e); }, false);
takePicture.onchange = function (event) {
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
processImage(file);
}
};
function processImage(file) {
var reader = new FileReader();
reader.readAsDataURL(file)
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
context.drawImage(img, 100,100)
}
img.src = e.target.result;
}
}
// functions for drawing (works perfectly well)
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
x = evt.clientX - rect.left;
y = evt.clientY - rect.top;
}
function startLine() {
context.moveTo(x,y);
context.beginPath();
clicked = true;
}
function keepLine() {
if(clicked) {
context.lineTo(x,y);
context.stroke();
context.moveTo(x,y);
}
}
function drawLine() {
context.lineTo(x,y);
context.stroke();
clicked = false;
}
没有版权
const EL = (sel) => document.querySelector(sel);
const ctx = EL("#canvas").getContext("2d");
function readImage() {
if (!this.files || !this.files[0]) return;
const FR = new FileReader();
FR.addEventListener("load", (evt) => {
const img = new Image();
img.addEventListener("load", () => {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0);
});
img.src = evt.target.result;
});
FR.readAsDataURL(this.files[0]);
}
EL("#fileUpload").addEventListener("change", readImage);canvas {display: block;}<input type='file' id="fileUpload" />
<canvas id="canvas" width="300" height="200"></canvas><html>
<head>
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('load', function() {
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
c.width = img.width;
c.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
});//]]>
</script>
</head>
<body>
<div style="background:#990; width:100%; padding:20px; ">
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
</div>
<canvas id="myCanvas" ></canvas>
</body>
</html>
这是一个更简单的方法，它不使用低效的数据网址：
var canvas = document.getElementById('canvas')
var input = document.getElementById('input')
var c2d = canvas.getContext('2d')
input.onchange=function() {
var img = new Image()
img.onload = function() {
canvas.width = this.width
canvas.height = this.height
c2d.drawImage(this, 0, 0)
URL.revokeObjectURL(this.src)
}
img.src = URL.createObjectURL(this.files[0])
}<input type=file id=input> <br>
<canvas id=canvas></canvas>