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 register_shutdown_function()函數(shù)的使用示例
這篇文章主要介紹了PHP register_shutdown_function()函數(shù)的使用示例,當(dāng)我們的腳本執(zhí)行完成或者意外死掉導(dǎo)致 php 執(zhí)行即將關(guān)閉時(shí),register_shutdown_function()這個(gè)函數(shù)會(huì)被調(diào)用,需要的朋友可以參考下2015-06-06完美解決thinkphp驗(yàn)證碼出錯(cuò)無(wú)法顯示的方法
這篇文章主要介紹了完美解決thinkphp驗(yàn)證碼出錯(cuò)無(wú)法顯示的方法,對(duì)比官網(wǎng)給出的方法結(jié)合自身的實(shí)踐,給出了一個(gè)相對(duì)可行的解決方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12Yii實(shí)現(xiàn)簡(jiǎn)單分頁(yè)的方法
這篇文章主要介紹了Yii實(shí)現(xiàn)簡(jiǎn)單分頁(yè)的方法,涉及Yii模型調(diào)用讀取數(shù)據(jù)及視圖操作相關(guān)技巧,需要的朋友可以參考下2016-04-04yii實(shí)現(xiàn)CheckBox復(fù)選框在同一行顯示的方法
這篇文章主要介紹了yii實(shí)現(xiàn)CheckBox復(fù)選框在同一行顯示的方法,對(duì)比了網(wǎng)上搜集的方法,給出了改進(jìn)的意見(jiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12PHP使用header方式實(shí)現(xiàn)文件下載功能
這篇文章主要介紹了PHP使用header方式實(shí)現(xiàn)文件下載功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11PHP遞歸獲取目錄內(nèi)所有文件的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇PHP遞歸獲取目錄內(nèi)所有文件的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11ThinkPHP3.1新特性之動(dòng)態(tài)設(shè)置自動(dòng)完成和自動(dòng)驗(yàn)證示例
這篇文章主要介紹了ThinkPHP3.1動(dòng)態(tài)設(shè)置自動(dòng)完成和自動(dòng)驗(yàn)證,需要的朋友可以參考下2014-06-06