php实现粘贴截图并完成上传功能

今天发现segmentfault的评论留言里面可以粘贴上传图片,于是研究了下怎么实现的!
原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传

代码可以直接运行,有兴趣你们可以试试

<?php
header("Access-Control-Allow-Origin:*");
$url = 'http://'.$_SERVER['HTTP_HOST'];
$file = (isset($_POST["file"])) ? $_POST["file"] : '';
if($file)
{
$data = base64_decode(str_replace('data:image/png;base64,', '', $file)); //截图得到的只能是png格式图片，所以只要处理png就行了
$name = md5(time()) . '.png'; // 这里把文件名做了md5处理
file_put_contents($name, $data);
echo"$url/$name";
die;
}
?>

<div id="box"style="width:400px;height:400px;border:1px solid;"contenteditable>
</div>
<input type="hidden"name="img"value=""id="img_puth"/>

<script>
//查找box元素,检测当粘贴时候,
document.querySelector('#box').addEventListener('paste', function(e) {

//判断是否是粘贴图片
 if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1)
{
var that = this,
reader = new FileReader();
file = e.clipboardData.items[0].getAsFile();

//ajax上传图片
 reader.onload = function(e)
{
 var xhr = new XMLHttpRequest(),
 fd = new FormData();

 xhr.open('POST', '', true);
 xhr.onload = function ()
{
 var img = new Image();
 img.src = xhr.responseText;

 // that.innerHTML = '<img src="'+img.src+'"alt=""/>';
 document.getElementById("img_puth").value = img.src;
}

 // this.result得到图片的base64 (可以用作即时显示)
 fd.append('file', this.result);
 that.innerHTML = '<img src="'+this.result+'"alt=""/>';
xhr.send(fd);
}
reader.readAsDataURL(file);
}
}, false);
</script>

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • php使用CutyCapt实现网页截图保存的方法

    本文实例讲述了php使用CutyCapt实现网页截图保存的方法.分享给大家供大家参考,具体如下: 网页截图这个功能大家可能用到最多的就是QQ截图,或利用asp.net来实现截图,其实我们也可以直接使用php来网页截图,这里就来给大家介绍php利用CutyCapt实现网页截图的流程: CutyCapt下载地址:http://sourceforge.net/projects/cutycapt/files/cutycapt/ windows CutyCapt不需要安装,直接保存到你的电脑中即可,然后p

  • php使用ffmpeg获取视频信息并截图的实现方法

    php使用ffmpeg获取视频信息并截图的实现方法

    本文实例讲述了php使用ffmpeg获取视频信息并截图的方法.分享给大家供大家参考,具体如下: $movie = new ffmpeg_movie('4.mp4'); $width=$movie->getFrameWidth(); $height=$movie->getFrameHeight(); $count= $movie->getFrameCount(); print $count . ''; $n = round ( $count/16 ); print $n . ''; for

  • Linux环境下php实现给网站截图的方法

    本文实例讲述了Linux环境下php实现给网站截图的方法.分享给大家供大家参考,具体如下: 第一步:下载wkhtmltopdf 复制代码 代码如下: [root@iZ94aawoublZ ~]# wget http://download.gna.org/wkhtmltopdf/0.12/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz 第二步:解压 复制代码 代码如下: [root@iZ94aawoublZ ~]# xz -d wkhtmlto

  • THINKPHP+JS实现缩放图片式截图的实现

    THINKPHP+JS实现缩放图片式截图的实现

    作者:杨鑫奇 原始链接:http://www.cnblogs.com/scotoma/archive/2010/03/05/1679477.html 今晚TP论坛的一位大哥加我了,说也遇到这个方面的问题,呵呵!想想其实很多东西都遇到了,是不是应该分享出来呢?其实自己的很多东西都是别人那来的,取之于网络用之于网络!只有大家多分享,才能够提高! 实现方式 上传图片 -- 保存并显示图片 -- JS获取缩略图参数 -- 提交位置参数 -- 图片缩放保存类处理图片 -- 保存截取的图片--更新数据库 -

  • php 获取SWF动画截图示例代码

    1.下载附件,并安装,方法看附件中的帮助 2.拷贝代码进合适位置,生成图片,怎么处理,自己看着办喽 复制代码 代码如下: $oldswf = "/uploads/swf/test.swf"; $oldjpg = "/uploads/litpic/test.jpg"; $flash2jpeg = new COM("SunCN.Flash2Jpeg"); if ($flash2jpeg) { $a = $flash2jpeg->Flash2Jp

  • php通过执行CutyCapt命令实现网页截图的方法

    本文实例讲述了php通过执行CutyCapt命令实现网页截图的方法.分享给大家供大家参考,具体如下: 用php使用exec执行命令 PS.默认情况下exec函数是禁用的,打开php.ini检查disable_function是否包含这个还是,有就去除 复制代码 代码如下: exec('xvfb-run --server-args="-screen 0, 1024x768x24" CutyCapt --url=http://www.jb51.net --out=2.jpg'); 这个里一

  • php实现粘贴截图并完成上传功能

    今天发现segmentfault的评论留言里面可以粘贴上传图片,于是研究了下怎么实现的! 原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传 代码可以直接运行,有兴趣你们可以试试 <?php header("Access-Control-Allow-Origin:*"); $url = 'http://'.$_SERVER['HTTP_HOST']; $file = (isset($_POST["file"])) ?

  • vue中利用simplemde实现markdown编辑器（增加图片上传功能）

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • 在win64上使用bypy进行百度网盘文件上传功能

    阿里云服务器的带宽为2M,网站每日的备份包都3G多了,离线下载太费时间了,打算每日将备份包自动上传到自己的百度云盘里.  1.先安装Python 执行python -V ,发现没安装python 2.去python官网去下载 我选的是64位版本的python2.7.17 3.安装python   这个地方必须选一下,加入Path里 安装完毕,执行python -V,显示正确的版本 4.安装pip https://pypi.org/project/pip/#files pip-19.3.1.tar

  • AjaxFileUpload+Struts2实现多文件上传功能

    AjaxFileUpload+Struts2实现多文件上传功能

    本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能,具体实现代码大家参考下本文. 单文件和多文件的实现区别主要修改两点, 一是插件ajaxfileupload.js里接收file文件ID的方式 二是后台action是数组形式接收 1.ajaxFileUpload文件下载地址http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ 2.引入jquery-1.8.0.min.js.ajaxFileUpload.js文件 3.文

  • Ajax 配合node js multer 实现文件上传功能

    Ajax 配合node js multer 实现文件上传功能

    说明 作为一个node 初学者,最近在做一个聊天软件,支持注册.登录.在线单人.多人聊天.表情发送.各种文件上传下载.增删好友.聊天记录保存.通知声开关.背景图片切换.游戏等功能,所以用到了multer 模块,经过各种查文档,做demo例子,终于成功实现单个文件上传功能,支持大部分文件格式上传,同时显示到网页上 效果 是不是有种微信即视感,没错,就是根据网页版微信来做的, 要实现整体效果的话,要配合css和html来做,前端初学者,第一次发博客,实在捉急,近期,将会将代码放到github上去,感

  • jQuery的ajax中使用FormData实现页面无刷新上传功能

    jQuery的ajax中使用FormData实现页面无刷新上传功能

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

  • 使用jQuery.form.js/springmvc框架实现文件上传功能

    使用jQuery.form.js/springmvc框架实现文件上传功能

    使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul

  • java使用CKEditor实现图片上传功能

    java使用CKEditor实现图片上传功能

    java如何使用CKEditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的CKEditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容,并修改hidden属性值为显示上传选项卡 删除image.js中包含在双引号中的上述文本 将image.js中的hidden属性值改为0 3.修改ckeditor/config.js文件,配置"上传到服务器"按钮调用的controller接口 4."上传到服务器&

  • Java组件commons fileupload实现文件上传功能

    Java组件commons fileupload实现文件上传功能

    Apache提供的commons-fileupload jar包实现文件上传确实很简单,最近要用Servlet/JSP做一个图片上传功能,在网上找了很多资料,大多是基于struts框架介绍的,还有些虽然也介绍common-fileupload的上传,但是那些例子比较老,有些类现在都废弃了. 通过研究学习总结,终于完成了这个上传功能,下面与大家分享一下. 案例场景 一个图书馆后台管理界面,需要提供上传图书图片的功能并且最终显示在页面中. 实现效果 进入添加书籍页面,默认显示一个图片"暂无突破&qu

  • Spring实现文件上传功能

    本篇文章,我们要来做一个Spring的文件上传功能: 1. 创建一个Maven的web工程,然后配置pom.xml文件,增加依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>1.0.2.RELEASE</version> </dep

随机推荐