لقد رأيت أن مربع الإدخال لموقع معين يدعم وظيفة لقطة الشاشة واللصق ، ووجدت أنها مثيرة للاهتمام ، لذلك أخرجت الرمز وشاركتها.
لسوء الحظ ، فإن الإصدار الأعلى فقط من متصفح Chrome يدعم لصق مباشر ، ولم تتمكن المتصفحات الأخرى من لصقها حتى الآن (لم يتم اختبار IE11). بالطبع ، هذه وظيفة تجربة المستخدم المعززة أفضل من لا شيء.
رمز هيكل مربع الإدخال:
نسخة الكود كما يلي:
<type type = "text" id = "testInput" />
ربط أحداث لصق لمربع الإدخال:
نسخة الكود كما يلي:
var input = document.getElementById ('testInput') ؛
input.adDeventListener ('Paste' ، function (event) {
// dosomething ...
}) ؛
يوفر كائن واجهة الحدث لصق الأحداث واجهة ClistboardData ، مما يحفظ البيانات في حافظة النظام. كما ذكر أعلاه ، يمكن فقط للإصدارات الأعلى من متصفحات Chrome الوصول مباشرة إلى بيانات حافظة النظام. يوفر هذا مدخلًا للصور المحفوظة على الحافظة للتفاعل مباشرة على صفحة الويب بعد لقطة الشاشة.
لقطة الشاشة المذكورة هنا هي لقطة الشاشة التي توفرها QQ أو وظيفة لقطة الشاشة لمفتاح PRTSCN الذي يوفره النظام ، أو وظيفة لقطة الشاشة التي يوفرها برنامج الطرف الثالث الآخر.
نسخة الكود كما يلي:
input.adDeventListener ('Paste' ، function (event) {
// الواجهة للوصول إلى حافظة النظام التي تمت إضافتها إلى كائن الحدث
var clipboarddata = event.clipboarddata ،
أنا = 0 ،
العناصر ، البند ، الأنواع ؛
if (clipboarddata) {
العناصر = clipboarddata.items ؛
إذا (! العناصر) {
يعود؛
}
العنصر = العناصر [0] ؛
// نوع البيانات المحفوظة في الحافظة
الأنواع = clipboarddata.types || [] ؛
لـ (؛ i <types.length ؛ i ++) {
if (أنواع [i] === 'ملفات) {
العنصر = العناصر [i] ؛
استراحة؛
}
}
// تحديد ما إذا كانت بيانات الصورة
if (item && item.kind === 'file' && item.type.match (/^image /// i)) {
// اقرأ الصورة
Imgreader (عنصر) ؛
}
}
}) ؛
بعد الحصول على بيانات الصورة من الحافظة ، يمكنك استخدام FileReader لقراءتها.
نسخة الكود كما يلي:
var imgreader = function (item) {
ملف var = item.getasfile () ،
reader = new fileReader () ؛
// بعد قراءة الملف ، سيتم عرضه على صفحة الويب
reader.onload = function (e) {
var img = new image () ؛
img.src = e.target.result ؛
document.body.appendchild (IMG) ؛
} ؛
// اقرأ الملف
reader.readasdataurl (file) ؛
} ؛
يتم تنفيذ الرمز القصير للغاية ، يمكنك استخدام رمز المصدر التالي لمعرفة العرض التوضيحي.
نسخة الكود كما يلي:
<! doctype html>
<html lang = "en-us">
<head>
<meta charset = "utf-8">
<title> استخدم clipboarddata لتنفيذ وظائف لقطة الشاشة واللصق في صفحات الويب </title>
<type type = "text/css">
#box {width: 200px ؛ الارتفاع: 200 بكسل ؛ الحدود: 1 بكسل Solid #DDD ؛ }
</style>
</head>
<body>
<h1> استخدم ClipboardData لتنفيذ وظائف لقطة الشاشة واللصق في صفحات الويب </h1>
<hr />
<div> <input type = "text" id = "testInput" placeholder = "Paste في مربع الإدخال بعد screenshot" size = "30" /> < /div>
<script type = "text/javaScript">
(وظيفة(){
var imgreader = function (item) {
var blob = item.getasfile () ،
reader = new fileReader () ؛
reader.onload = function (e) {
var img = new image () ؛
img.src = e.target.result ؛
document.body.appendchild (IMG) ؛
} ؛
reader.readasdataurl (blob) ؛
} ؛
document.getElementById ('testInput') .adDeventListener ('Paste' ، function (e) {
var clipboarddata = e.clipboarddata ،
أنا = 0 ،
العناصر ، البند ، الأنواع ؛
if (clipboarddata) {
العناصر = clipboarddata.items ؛
إذا (! العناصر) {
يعود؛
}
العنصر = العناصر [0] ؛
الأنواع = clipboarddata.types || [] ؛
لـ (؛ i <types.length ؛ i ++) {
if (أنواع [i] === 'ملفات) {
العنصر = العناصر [i] ؛
استراحة؛
}
}
if (item && item.kind === 'file' && item.type.match (/^image /// i)) {
Imgreader (عنصر) ؛
}
}
}) ؛
}) () ؛
</script>
</body>
</html>