Home > Developer > JavaScript

JavaScript implements read Clipboard paste screenshot in Web page _javascript tips

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

See the input frame of a website to support the function of screen pasting, feel a little meaning, so the code out to share.

Unfortunately, only a high version of the Chrome browser to support this direct paste, other browsers so far have not been able to paste (IE11 not tested), of course, this enhanced user experience is always better than no good.

The structure code for the input box:

Copy Code code as follows:

<input type= "text" id= "Testinput"/>

To bind a paste event for an input box:

Copy Code code as follows:

var input = document.getElementById (' testinput ');

Input.addeventlistener (' Paste ', function (event) {
DoSomething ...
});

The event interface object for pasting events provides an Clipboarddata interface that holds data from the system Clipboard, as described above, where only the newer Chrome browsers have direct access to the system Clipboard data. This provides a portal for directly interacting with pictures that are saved to the Clipboard after the screen is cut.

Here the screen, which is provided by the QQ screen or the system with the PRTSCN key screen function, or other third-party software to provide the screen-cutting function.

Copy Code code as follows:

Input.addeventlistener (' Paste ', function (event) {
interface to the Access system Clipboard that is added to the event object
var clipboarddata = Event.clipboarddata,
i = 0,
Items, item, types;

if (clipboarddata) {
Items = Clipboarddata.items;

if (!items) {
Return
}

item = Items[0];
Data types saved on the Clipboard
Types = Clipboarddata.types | | [];

for (; i < types.length; i++) {
if (types[i] = = ' Files ') {
item = Items[i];
Break
}
}

Determine if the picture data
if (item && item.kind = = ' file ' && item.type.match (/^image\//i)) {
Read the picture
Imgreader (item);
}
}
});

The picture data is taken from the Clipboard and can be read with FileReader.

Copy Code code as follows:

var imgreader = function (item) {
var file = Item.getasfile (),
reader = new FileReader ();

To display a file in a Web page after reading it
Reader.onload = function (e) {
var img = new Image ();

IMG.SRC = E.target.result;
Document.body.appendChild (IMG);
};

Reading files
Reader.readasdataurl (file);
};


Very short code is achieved, you can use the following source to see the demo.

Copy Code code as follows:

<! DOCTYPE html>
<meta charset= "UTF-8"
<title> Exploit Clipboarddata in the Web page to achieve the function of screen-pasting </title>
<style type= "Text/css"
#box {width:200px; border:1px solid #ddd;
</style>
<body>

<div><input type= "text" id= "Testinput" placeholder= "screenshot and paste into the input box" 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 = 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,
i = 0,
Items, item, types;

if (clipboarddata) {
Items = Clipboarddata.items;

if (!items) {
Return
}

item = Items[0];
Types = Clipboarddata.types | | [];

for (; i < types.length; i++) {
if (types[i] = = ' Files ') {
item = Items[i];
Break
}
}

if (item && item.kind = = ' file ' && item.type.match (/^image\//i)) {
Imgreader (item);
}
}
});
})();
</script>

</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More