<input id="input" type="file" multiple accept="image/*">
<div id="container" class="img-container"></div>
第一种FileReader 拿到base64
var aInput = document.getElementById("input"),
imgContainer = document.getElementById("container");
aInput.addEventListener('change', function() {
for (var i = 0; i < this.files.length; i++) {
var img = new Image(),
reader = new FileReader(),
url = reader.readAsDataURL(this.files[i]);
imgContainer.appendChild(img);
reader.onload = function(e) {
img.src = e.target.result;//base64
}
}
})
第二种获取本地路径,不需要转base64
var img = new Image();
var aInput = document.getElementById("input");
aInput.addEventListener('change', function(e) {
console.log(e);
const file = e.srcElement.files[0]
const imgURL = window.URL.createObjectURL(file) // imgURL就是你的图片的本地路径,两部就能解决问题
console.log(imgURL);
img.src = imgURL;
})
// img.src = './assets/logo.png';
document.getElementById('container').appendChild(img)
第三种canvas
var img = new Image(),
canvas;
img.onload = function() {
canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
console.log(canvas.toDataURL());//base64
document.body.appendChild(canvas);
return canvas;
}
img.src = './assets/logo.png';//写死的相对路径,但是选择图片路径肯定不是固定的,以下是获取图片的本地路径
var aInput = document.getElementById("input");
aInput.addEventListener('change', function(e) {
console.log(e);
const file = e.srcElement.files[0]
const imgURL = window.URL.createObjectURL(file) // imgURL就是你的图片的本地路径,两部就能解决问题
console.log(imgURL);
img.src = imgURL;
})
//drawImage即将img画到画布区域内,接收三个参数,第一个是img对象,第二个是绘制的起始位置水平,第三个是绘制的垂直位置。
网友评论