<input type="file"> в которое можно было бы цеплять сразу папки. Просто кладете все ваши изображения в одну конкретную папку и уже эту папку цепляйте в поле и да, так можно.
<input type="file"> и функцию URL.createObjectURL() и тогда все у вас будет нормально.<input onchange="getImageLink(this);" type="file">function getImageLink(input) {
if (input.files > 0) {
var link = URL.createObjectURL(input.files[0]);
console.log("Ссылка на прицепленный файл:\n" + link);
}
}
...
"permissions" : [ "cookies", "tabs", "<all_urls>" ],
"background" : { "persistent": true, "scripts": [ "background.js" ] },
...<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Пример</title>
<style>
body {
margin: 0;
font-family: 'Verdana';
font-size: 18px;
line-height: 1.5;
text-align: center;
color: #000000;
}
.table {
display: table;
width: 100%;
height: 100vh;
}
.cell {
display: table-cell;
vertical-align: middle;
padding: 50px;
}
input[type="file"] {
display: block;
background: #cdf;
padding: 15px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.1);
width: 480px;
margin: auto;
}
.result {
display: block;
background: #cfd;
padding: 15px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.1);
width: 480px;
margin: 25px auto 0 auto;
}
.result:empty {
display: none;
}
</style>
<script>
function imageHandler(input) {
if (input.files) {
var img = document.createElement('img');
img.src = URL.createObjectURL(input.files[0]);
img.style.position = 'fixed';
img.style.top = '-999999px';
img.style.right = '-999999px';
document.querySelector('.cell').append(img);
setTimeout(function() {
var canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var data = context.getImageData(1, 1, 1, 1).data;
var rgba = 'rgba(' + data[0] + ', ' + data[1] +', ' + data[2] + ', ' + (data[3] / 255) + ');';
document.querySelector('.result').innerHTML = 'Цвет первого пикселя: ' + rgba;
}, 1000);
}
}
</script>
</head>
<body>
<div class="table">
<div class="cell">
<input onchange="imageHandler(this);" type="file">
<div class="result"></div>
</div>
</div>
</body>
</html>