1. 程式人生 > >JavaScript從剪下板中獲取圖片並在游標處插入

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 完美解決javascriptiphone手機和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,或有意地清除時,才可能更新或清除其內容,即剪貼或