<?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>

php实现粘贴截图并完成上传功能的更多相关文章

  1. 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能

    作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...

  2. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  3. django下的ckeditor 5.0 文本编辑器上传功能。

    完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...

  4. H5 利用vue实现图片上传功能。

    H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...

  5. PHPCMS_V9 模型字段添加单文件上传功能

    后台有“多文件上传”功能,但是对于有些情况,我们只需要上传一个文件,而使用多文件上传功能上传一个文件,而调用时调用一个文件URL太麻烦了. 使用说明: 1.打开phpcms\modules\conte ...

  6. ASP.NET MVC4实现TinyMCE 4.0.20自定义上传功能

    tinymce 插件不提供免费的本地图片上传功能,所以自己将uploadify这个上传插件整合到tinymce,实现本地上传,还用到了jquery.ui插件,先展示全部的代码 @model TinyM ...

  7. 配置php.ini实现PHP文件上传功能

    本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...

  8. MVC5:使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...

  9. Spring 文件上传功能

    本篇文章,我们要来做一个Spring的文件上传功能: 1. 创建一个Maven的web工程,然后配置pom.xml文件,增加依赖: <dependency> <groupId> ...

随机推荐

  1. bat判断当前目录是否是根目录

    记录下,一遍查用. @echo offif "%~p0"=="\" (echo 在根目录) else echo 不在根目录pause

  2. 调用QQ聊天功能

    [HTML]: <a href="javascript:void(0);" onclick="chatQQ()">咨询客服</a> fu ...

  3. @synchronized(self)

    @synchronized 的作用是创建一个互斥锁,保证此时没有其它线程对self对象进行修改.这个是objective-c的一个锁定令牌,防止self对象在同一时间内被其 它线程访问,起到线程的保护 ...

  4. 【绘图技巧】ps快捷键的用法

    Ctrl+N:新建画布          Ctrl+O:打开对话框 F: 在三种画布中切换 Z:缩放工具(临时)      Ctrl+0:满画面显示 空格:切换到手(临时) Ctrl+":网 ...

  5. oracle11g安装教程(注意事项及图文教程)

    Oracle安装与重装注意事项 1.安装oracle(**) 注意:安装Oracle之前确定自己的主机(计算机)名要保证计算机名是英文的. 1.oracle的安装文件不要放在含有中文的目录当中,如:d ...

  6. ASP.NET Core 一步步搭建个人网站(6)_单页模式和优化

    前言 HI,有段时间没有更新了,主要因为第一年前事情比较多,有些事得忙着张罗下:第二呢,对个人网站进行了一次大范围的优化,主要是申请的云服务器资源有限,1m的网络带宽,带上图片展示的话,打开网站的平均 ...

  7. YAML书写规范

    1. 认识 YAML YAML是一个类似 XML.JSON 的标记性语言.YAML 强调以数据为中心,并不是以标识语言为重点.因而 YAML 本身的定义比较简单,号称"一种人性化的数据格式语 ...

  8. Spring+redis整合遇到的问题集以及注意事项

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  9. Junit4X系列--hamcrest的使用

    OK,在前面的一系列博客里面,我整理过了Assert类下面常用的断言方法,比如assertEquals等等,但是org.junit.Assert类下还有一个方法也用来断言,而且更加强大.这就是我们这里 ...

  10. j2e应用相关技术

    j2e应用相关技术 轻量级j2e应用以传统的jsp作为变现层技术,以一系列开源框架作为MVC层,中间件,持久层解决方案,并将这些开源框架有机组合在一起,使得j2e具有高度的可扩展性,可维护性. ser ...