[代码全屏查看]-利用ctrl+v实现粘贴截图完成上传功能

梦里梦外; 2022-07-28 01:42 140阅读 0赞

`http://www.oschina.net/code/piece_full?code=47893 <?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 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

相关 Selenium全屏截图，使用PIL拼接滚动截图

Selenium默认的截图save\_screenshot只支持对当前窗口内容进行截图，当如果你想要截取整个网页，那么，可以明确的告诉你。 Selenium做不到。你

水深无声/ 2023年10月09日 10:14/ 0 赞/ 12 阅读

相关 Github上传代码截图过程

Github上传代码截图过程首先，你得有github的账号，没有的话去注册一个：github官网：https://github.com/ 注册好了之后new一个re

迈不过友情╰/ 2022年11月29日 11:19/ 0 赞/ 166 阅读

相关 android长截图工具下载,Android实现长截屏功能

本文实例为大家分享了Android实现长截屏功能的具体代码，供大家参考，具体内容如下 1、MainActivity public class MainActivity ex

不念不忘少年蓝@/ 2022年10月16日 01:53/ 0 赞/ 234 阅读

相关 iOS 截屏功能的实现

import UIKit class CutScreenViewController: UIViewController {

╰半橙微兮°/ 2022年09月22日 13:55/ 0 赞/ 132 阅读

相关 [转]php实现粘贴截图并完成上传功能

原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传代码可以直接运行,有兴趣你们可以试试 <?php header("

野性酷女/ 2022年08月02日 09:54/ 0 赞/ 107 阅读

相关 [代码全屏查看]-利用ctrl+v实现粘贴截图完成上传功能

`http://www.oschina.net/code/piece_full?code=47893 <?php` `header(` `"Access-Control-Al

梦里梦外;/ 2022年07月28日 01:42/ 0 赞/ 141 阅读

相关前端页面免费全屏截图技术实现

<table style="table-layout:fixed;width:821px;color:rgb(68,68,68);font-family:Tahoma, 'Mi

Dear 丶/ 2022年05月28日 00:10/ 0 赞/ 200 阅读

相关 CKEditor粘贴屏幕截图上传图片、使用HttpServlet接收文件实现

CKEditor粘贴屏幕截图上传图片下载链接： [https://download.csdn.net/download/yebichao/10834320][http

╰半橙微兮°/ 2022年04月11日 13:21/ 0 赞/ 135 阅读

相关 javascript实现粘贴qq截图功能（clipboardData）

原文链接：[https://www.jb51.net/article/85338.htm][https_www.jb51.net_article_85338.htm]

迈不过友情╰/ 2022年04月08日 12:49/ 0 赞/ 293 阅读

相关 php复制粘贴截图并显示,ajax上传

案例一. 原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传 <?php header("Access-Control-A

古城微笑少年丶/ 2021年09月27日 08:54/ 0 赞/ 231 阅读