JavaScript從剪下板中獲取圖片並在游標處插入
edit_content_text.addEventListener('paste', function (ev) {
var clipboardData, items, item;
console.log(ev.clipboardData.items[0].type)
if (ev && (clipboardData = ev.clipboardData) && (items = clipboardData.items) && (item = items[0]) && item.kind == 'file' && item.type.includes("image")) {
//blob就是剪貼簿中的二進位制圖片資料
var blob = item.getAsFile();
//定義fileReader讀取完資料後的回撥
var reader = new FileReader();
reader.onload = function () {
//result應該是base64編碼後的圖片
var sHtml = '<img src="' + event.target.result + '">';
if (focus === true) {
var selection = getSelection()
var range = selection.getRangeAt(0);
var img = document.createElement('img');
img.src = event.target.result;
range.insertNode(img);
// edit_content_text.innerHTML = edit_content_text.innerHTML + sHtml;
}
//_this.pasteHTML(sHtml);//這裡應該是關於游標和插入程式碼的具體操作
}
//用fileReader讀取二進位制圖片,完成後會呼叫上面定義的回撥函式
reader.readAsDataURL(blob);
//return false;
}
});
相關推薦
JavaScript從剪下板中獲取圖片並在游標處插入
edit_content_text.addEventListener('paste', function (ev) { var clipboardData, items, item; console.log(ev.clipboardData.items[0].type) if (ev &am
C#實戰小技巧(八):將剪下板中的內容儲存為圖片
進行C#開發時,可以將複製到剪下板中的內容轉為HTML檔案,再將HTML頁面轉為圖片進行儲存,示例效果如下。 被複制的Excel表格: 生成的圖片: 實現上述功能的主要程式碼如下,能夠將從Word、Excel、網頁等地方複製的內容匯出,並儲存為圖片。 程式碼:
讓input支援 ctrl v上傳貼上圖片? 讓input支援QQ截圖或剪下板中的影象資料(Java實現儲存)
原理:監聽貼上 → 獲取貼上內容 → 將內容上傳 → 抓取後返回替換至input 我們在生產中用到的介面: 測試地址 http://sms.reyo.cn 使用者名稱:aa 密碼:123456 以下是PHP實現: <?php header("Access-Control-A
從剪下板貼上圖片上傳
一個需求:讓使用者使用剪下板來貼上圖片(而不是將圖片儲存到本地,然後再選取檔案上傳) fakepath是什麼鬼 今天做圖片上傳時發現,不論是什麼路徑上傳的檔案,路徑都變成了這種格式 “C:\fakepath\檔名”。 以前做圖片上傳時沒留意過這個f
將input框中的值複製到瀏覽器的剪下板中
<input type="hidden" id="qrcodeUrl" value="https://www.baidu.com"> <button class="button-code button-copy">複製連結</button
JS實現複製文字到電腦剪下板中
程式碼實現 (吐槽:百度上各種方法,就是不好使。或者就是引用第三方外掛,去stackoverflow,一下就解決,所以啊,多用谷歌) 已測試谷歌和IE(8) function copyStringToC
個人js學習細節- 實現點選按鈕複製文字框中文字到剪下板中的方法
主要程式碼: <textarea name="text" id="text" cols="30" rows="10"></textarea> <button onclick="myCopy()">點選複製文字框內的內容</button><br
小工具:根據剪下板中的url生成markdown程式碼
參考部落格:爬CSDN部落格 - CSDN部落格 在部落格寫作中,我經常遇到這樣一個問題:當我需要掛出一些網站連結,比如參考部落格或者OJ連結的時候,需要用這樣 [爬CSDN部落格](https://blog.csdn.net/qq_17172105/article/
在瀏覽器中實現複製內容到剪下板中
前言前端開發時, 經常有這種功能, 需要把網頁中的有些內容複製到剪下板中。針對IE瀏覽器來說, 實現起來就很簡單, 因為直接有clipboardData 的物件可以使用,但是對於其他瀏覽器來說, 並沒有這個物件, 如何實現, 目前比較多的解法都是藉助flash。除此之外,這個
記一個複製黏貼的功能想法(黏貼剪下板中的數字自增,複製黏貼自增)
起因 照例是要寫起因的,起因非常之簡單,不知道大家有沒有遇到過需要輸入連續的 id= 101 ~ id = 110 這類數字的時候,這個時候能做的基本上是複製100,黏貼100,然後手動改 101,102,在我的腦海裡,除了使用excel ,其他沒有很
Javascript操作剪下板資料(支援IE、Chrome、360、搜狗)
近日,專案上需要在WEB頁面上操作剪下板中的資料,經過一頓搜尋,終於找到了一個比較完美的解決辦法。 當然,在實際應用時還要自行修改一下。經過測試,目前支援IE、Chrome、360、搜狗等瀏覽器,其它瀏覽器還未驗證。 <!DOCTYPE HTML PUBLIC "-/
HTML5 完美解決javascript中iphone手機和android手機複製文字到剪下板問題
1.執行以下解決方案條件:(這個是原理)①執行復制方法時 所複製文字不能被任何 塊級元素和行內塊元素和行內元素遮蓋否則無效;(解決方案:將文字通過絕對定位或其他方式移除螢幕外)②ios中不能複製屬性值,只能複製文字元素節點;(解決方案:可以把文字顏色設成背景色就能達到隱藏看不見的效果不影響顯示);直接上程式碼
[例項]UWP之正則獲取文字中的超連結到剪下板並貼上
MainPage.xaml中 <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
Qt中如何獲取剪切板中的內容
常用 數據 qdebug http ica repl file click cati void MainWindow::on_pushButton_clicked() { ui->label->clear(); const QClipboa
從網路中獲取圖片進行自動輪播
MainActivity package com.example.lunbotu2; import android.annotation.SuppressLint; import android.os.Handler; import android.os.Message; impor
製作剪下板複製功能ZeroClipboard中修改flash覆蓋面積大小
ZeroClipboard :version 1.0.7 一般用法與網上發的部落格差不多,今天只對如何修改flash塊的大小進行說明。 先貼程式碼: ZeroClipboard.setMoviePath("${base}/js/ZeroClipboard/
【技術】notepad++中如何快速選擇並複製一行到剪下板
用Notepad++寫程式碼,要是有一些重複的程式碼想copy一下,還真不容易,怎麼辦呢? 方法主要是應用鍵盤上的Home鍵和End鍵:滑鼠游標停留在一行的某處, 按Home鍵游標會跳到行首,按End鍵游標會跳到行尾。 因此,滑鼠游標停留在行尾,按Shift+Home選中一行。滑鼠游標停
Vue中配合clipboard.js實現點選按鈕複製內容到剪下板
需求設定 點選某個按鈕,將設定的目標內容(例如下載連結地址)複製到剪下板,可以在電腦上任何地方貼上 不使用任何框架和使用Flash,以最小的程式碼實現該功能,並能相容所有主流瀏覽器 外掛選擇 clipboard.js: * `NPM方式`:`np
JS獲取貼上板中的圖片進行展示和上傳
目前有一個需求,需要在頁面中獲取QQ、微信等軟體的截圖上傳到伺服器,為了使用者體驗,不能讓使用者主動上傳,提供給使用者方法,在web頁面使用貼上快捷鍵,就可以貼上到頁面,然後點擊發送進行上傳。而且使用者如果貼上的是文字也需要能正常傳送文字內容。 這個需求需要分為四個部分: 1、構造頁面,
c++獲取剪下板的內容
剪貼簿內建在windows中,並且使用系統的內部資源RAM,或虛擬記憶體來臨時儲存剪下和複製的資訊,可以存放的資訊種類是多種多樣的。剪下或複製時儲存在剪貼簿上的資訊,只有再剪貼或複製另外的資訊 ,或停電、或退出windows,或有意地清除時,才可能更新或清除其內容,即剪貼或