php實(shí)現(xiàn)粘貼截圖并完成上傳功能
今天發(fā)現(xiàn)segmentfault的評(píng)論留言里面可以粘貼上傳圖片,于是研究了下怎么實(shí)現(xiàn)的!
原理很簡(jiǎn)單其實(shí)就是監(jiān)控粘貼事件,然后檢測(cè)是否粘貼的東西里面有圖片,有的話直接觸發(fā)ajax上傳
代碼可以直接運(yùn)行,有興趣你們可以試試
<?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元素,檢測(cè)當(dāng)粘貼時(shí)候,
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 (可以用作即時(shí)顯示)
fd.append('file', this.result);
that.innerHTML = '<img src="'+this.result+'"alt=""/>';
xhr.send(fd);
}
reader.readAsDataURL(file);
}
}, false);
</script>
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- php使用CutyCapt實(shí)現(xiàn)網(wǎng)頁(yè)截圖保存的方法
- php使用ffmpeg獲取視頻信息并截圖的實(shí)現(xiàn)方法
- PHP基于ffmpeg實(shí)現(xiàn)轉(zhuǎn)換視頻,截圖及生成縮略圖的方法
- Linux環(huán)境下php實(shí)現(xiàn)給網(wǎng)站截圖的方法
- php通過(guò)執(zhí)行CutyCapt命令實(shí)現(xiàn)網(wǎng)頁(yè)截圖的方法
- PHP調(diào)用ffmpeg對(duì)視頻截圖并拼接腳本
- php實(shí)現(xiàn)上傳圖片生成縮略圖示例
- PHP中使用FFMPEG獲取視頻縮略圖和視頻總時(shí)長(zhǎng)實(shí)例
- php實(shí)現(xiàn)根據(jù)url自動(dòng)生成縮略圖的方法
- 使用PHP生成圖片的縮略圖的方法
- Windows平臺(tái)PHP+IECapt實(shí)現(xiàn)網(wǎng)頁(yè)批量截圖并創(chuàng)建縮略圖功能詳解
相關(guān)文章
php curl簡(jiǎn)單采集圖片生成base64編碼(并附curl函數(shù)參數(shù)說(shuō)明)
今天小編就為大家分享一篇關(guān)于php curl簡(jiǎn)單采集圖片生成base64編碼(并附curl函數(shù)參數(shù)說(shuō)明),小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-02-02
php 使用mpdf實(shí)現(xiàn)指定字段配置字體樣式的方法
前兩天在做一個(gè)pdf導(dǎo)出功能,使用的插件是kartik-v/yii2-mpdf,此插件使用的是mpdf。接下來(lái)通過(guò)本文給大家介紹php 使用mpdf實(shí)現(xiàn)指定字段配置字體樣式的方法,需要的朋友可以參考下2019-07-07
laravel5實(shí)現(xiàn)微信第三方登錄功能
這篇文章主要介紹了laravel5實(shí)現(xiàn)微信第三方登錄功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
基于PHP實(shí)現(xiàn)用戶(hù)在線狀態(tài)檢測(cè)
這篇文章主要介紹了基于PHP實(shí)現(xiàn)用戶(hù)在線狀態(tài)檢測(cè),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
Zend Framework入門(mén)教程之Zend_Config組件用法詳解
這篇文章主要介紹了Zend Framework入門(mén)教程之Zend_Config組件用法,結(jié)合實(shí)例形式分析了Zend_Config組件針對(duì)各種類(lèi)型配置文件操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
mysqli_set_charset和SET NAMES使用抉擇及優(yōu)劣分析
盡量使用mysqli_set_charset(mysqli:set_charset)而不是SET NAMES, 當(dāng)然, 這個(gè)內(nèi)容在PHP手冊(cè)中也有敘及, 但是卻沒(méi)有解釋為什么,接下來(lái)為您揭下神秘面紗2013-01-01
ThinkPHP表單令牌錯(cuò)誤的相關(guān)解決方法分析
這篇文章主要介紹了ThinkPHP表單令牌錯(cuò)誤的相關(guān)解決方法,分析了thinkPHP出現(xiàn)令牌錯(cuò)誤的相關(guān)處理過(guò)程與解決方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05

