在网页中实现“截屏”上传图片功能

时间：2022-06-25 03:54:07 编辑：袖梨来源：一聚教程网

对于web来说，用户提到这个需求，我们起初的想法可能都是：除非开发嵌入式控件，不然根本无法实现。

不过随着webkit等内核的浏览器兴起，我们完全可以借助W3C的一些API，和一些变通的方式实现这个功能。

今天就讲讲如何在web页面中实现“截屏”并且上传。

这里“截屏”之所以要打引号，是因为确实无法实现“截屏”，但是我们可以通过变通方式实现，比如客户短聊天软件，QQ，旺旺等，这些软件截屏之后，数据都会在“剪切板”中保存一份副本，这里其实主要是讲如何获取”剪切板”中的图片上传，并且显示在网页上。

我们需要用到以下两个功能

Clipboard API and events

This document describes APIs for clipboard operations such as copy, cut and paste in web applications.

File API

This specification provides an API for representing file objects in web applications, as well as programmatically selecting them and accessing their data.

有了这些资料，其实实现起来也是so easy!!

将下面的代码保存成html页面,然后使用QQ或者旺旺随便截一个图，回到该页面，ctrl+v，你会发现神奇的事情发生了

//因为安全原因，浏览器为我们提供了onpaste事件，读取剪贴板数据仅能在该事件发生时在事件处理程序中进行。

代码如下

复制代码

document.body.onpaste = function(e) {

//console.log(e)

var items = e.clipboardData.items;

for (var i = 0; i < items.length; ++i) {

var item = e.clipboardData.items[i];

if (items[i].kind == 'file' && items[i].type == 'image/png') {

//FileReader可以参考API

var fileReader = new FileReader();

//readAsDataURL是一个异步过程，这里提供回调方法

fileReader.onloadend = function () {

var d = this.result.substr( this.result.indexOf(',')+1);

var img = document.createElement("img");

img.src= "data:image/jpeg;base64,"+d;

document.body.appendChild(img);

};

//DataURL，不清楚了可以去看下资料

fileReader.readAsDataURL(item.getAsFile());

break; // Just get one

}

};

如果要实现上传其实很简单了，将DataURL保存到form中，然后异步提交
后端服务器将DataURL转换成图片，然后将物理路径返回
这样，一个完整的在网页中“截屏”上传图片的功能就实现了

推荐专题

最新下载

热门教程

在网页中实现“截屏”上传图片功能

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程