Я видел, что входная коробка определенного веб -сайта поддерживает скриншот и функцию вставки, и я нашел это интересным, поэтому я выкопал код и поделился им.
К сожалению, только более высокая версия браузера Chrome поддерживает прямое вставка, а другие браузеры до сих пор не смогли вставить (IE11 не был проверен). Конечно, эта улучшенная функция пользовательского опыта лучше, чем нет.
Структивный код блока ввода:
Кода -копия выглядит следующим образом:
<input type = "text" id = "testinput" />
Свяжите события вставки для коробки ввода:
Кода -копия выглядит следующим образом:
var input = document.getElementbyId ('testInput');
input.addeventlistener ('past', function (event) {
// dosomething ...
});
Объект интерфейса событий для вставки событий обеспечивает интерфейс буферизащика, который сохраняет данные в системном буфере обмена. Как упомянуто выше, только более высокие версии браузеров Chrome могут непосредственно получить доступ к данным системного буфера обмена. Это обеспечивает вход для изображений, сохраненных в буфер обмена для взаимодействия непосредственно на веб -странице после снимка экрана.
Упомянутый здесь скриншот-это скриншот, предоставляемый QQ, или функция экрана снимка клавиши PRTSCN, предоставленную системой, или функция экрана, предоставленная другим сторонним программным обеспечением.
Кода -копия выглядит следующим образом:
input.addeventlistener ('past', function (event) {
// интерфейс для доступа к системному обмену, добавленному в объект события
var boopboarddata = event.clipboarddata,
i = 0,
Предметы, предмет, типы;
if (boopboarddata) {
items = boopbearddata.items;
if (! пункты) {
возвращаться;
}
item = item [0];
// тип данных сохранен в буфер обмена
types = boopbearddata.types || [];
for (; i <types.length; i ++) {
if (types [i] === 'files') {
item = item [i];
перерыв;
}
}
// определить, есть ли это данные изображения
if (item && item.kind === 'file' && item.type.match (/^image /// i)) {
// Читать изображение
imgreader (item);
}
}
});
После получения данных изображения из буфера обмена вы можете использовать FileReader для его прочтения.
Кода -копия выглядит следующим образом:
var imgreader = function (item) {
var file = item.getasfile (),
reader = new FileReader ();
// После прочтения файла он будет отображаться на веб -странице
reader.onload = function (e) {
var img = новое изображение ();
img.src = e.target.result;
document.body.appendchild (img);
};
// Читать файл
reader.readasdataurl (файл);
};
Очень короткий код реализован, вы можете использовать следующий исходный код, чтобы увидеть демонстрацию.
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en-us">
<голова>
<meta charset = "utf-8">
<TILE> Используйте BublbobboardData, чтобы реализовать функции экрана и вставки на веб -страницах </title>
<стиль типа = "text/css">
#box {ширина: 200px; Высота: 200px; Граница: 1PX SOLID #DDD; }
</style>
</head>
<тело>
<h1> Используйте BublboardData для реализации функций экрана и вставки на веб -страницах </h1>
<HR />
<div> <input type = "text" id = "testinput" Placeholder = "Вставьте в поле ввода после экрана" size = "30" /> < /div>
<script type = "text/javascript">
(function () {
var imgreader = function (item) {
var blob = item.getasfile (),
reader = new FileReader ();
reader.onload = function (e) {
var img = новое изображение ();
img.src = e.target.result;
document.body.appendchild (img);
};
reader.readasdataurl (blob);
};
document.getElementById ('testInput') .AdDeventListener ('paste', function (e) {
var boopboarddata = e.clipboarddata,
i = 0,
Предметы, предмет, типы;
if (boopboarddata) {
items = boopbearddata.items;
if (! пункты) {
возвращаться;
}
item = item [0];
types = boopbearddata.types || [];
for (; i <types.length; i ++) {
if (types [i] === 'files') {
item = item [i];
перерыв;
}
}
if (item && item.kind === 'file' && item.type.match (/^image /// i)) {
imgreader (item);
}
}
});
}) ();
</script>
</body>
</html>