剪切板粘貼上傳圖片功能的javascript實現

anyway 發布于2019-08-19 18:17 / 1099人閱讀

摘要：平時的開發中我們難免要上傳一些網頁截圖圖片等，傳統的選擇文件上傳使用起來不方便，這里介紹一種使用和實現的剪切板黏貼上傳圖片功能。剪切板中圖片的獲取與上傳通過，我們可以以的形式獲取到剪切板中的圖片，然后將數據作為參數通過的方式傳輸到服務器端。

平時的開發中我們難免要上傳一些網頁截圖、圖片等，傳統的選擇文件上傳使用起來不方便，這里介紹一種使用js和node實現的剪切板黏貼上傳圖片功能。當我們需要上傳截圖時，只需手動截圖后commond/ctrl+v即可完成圖片上傳。這種方式將大大減少我們在上傳圖片過程中花費的時間。

要實現剪切板黏貼上傳功能，首先我們要先能獲取到在剪切板中的圖片，這里給大家介紹一個很好用的js插件：ImageClipboard。

ImageClipboard

ImageClipboard是一款在chrome、firefox和opera上有效的可以將剪切板中的圖片黏貼到網頁上的工具。

安裝

可以使用bower很簡單的安裝，如果沒有安裝bower，請先安裝bower,安裝使用說明見：[bower：客戶端庫管理工具]。

bower install image-clipboard

使用：將剪切板中的圖片黏貼到網頁中去

運行以上代碼后，div#box中會插入一個img標簽，src即為當前剪切板中圖片。

剪切板中圖片的獲取與上傳

通過ImageClipboard，我們可以以base64的形式獲取到剪切板中的圖片，然后將base64數據作為參數通過POST的方式傳輸到服務器端。

瀏覽器端代碼：

this.props.clipboard.onpaste = function (base64) {
  //do stuff with the pasted image
  //console.log(base64)

  $.ajax({
    url: "http://localhost:2929/api/upload-img",
    dataType: "JSON",
    data: {
      imgData: base64},
    type: "POST",
    success: function(data) {
      console.log(data);
    }
  });

};

服務器端代碼

服務器端獲取到base64數據，即可將base64數據轉為圖片存儲或者傳送到其他服務器。

export default function uploadImg(req, res) {
     
    new Promise((resolve, reject) => {

    var fs = require("fs");
    var base64Data = req.body.imgData.replace(/^data:image/png;base64,/, "");

    fs.writeFile("out.png", base64Data, "base64", function(err) {
      console.log(err);
    });  

  });

}

博客文章地址：http://joebon.cc/clipboard-image-upload

參考資料

ImageClipboard: https://github.com/jorgenbs/ImageClipboard

bower：客戶端庫管理工具 http://javascript.ruanyifeng.com/tool/bower.html

GPU云服務器云服務器圖片粘貼上傳剪切板 python寫剪切板 linux清除剪切板

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79407.html

js獲取剪切板內容，js控制圖片粘貼。

摘要：在用戶執行粘貼操作的時候，能夠獲得剪切板的內容，本文討論一下這個問題。目前只有支持獲取剪切板中的圖片數據。這么多的判斷條件，基本可以確定通過剪切板過來的是粘貼的文件。在用戶執行粘貼操作的時候，js能夠獲得剪切板的內容，本文討論一下這個問題。目前只有Chrome支持獲取剪切板中的圖片數據。還好需要這個功能的產品目前只支持Chrome和Safari，一些Chrome的新特性是可以盡情使...

KaltZK 2019-08-19 17:22 評論0 收藏0
js拖拽粘貼上傳與CodeMirror

摘要：屬性介紹默認是默認是在粘貼操作時為空剪切板中的各項數據剪切板中的數據類型。避免重復創建上傳中文件成功失敗處理已上傳上傳出錯添加文件到隊列并上傳開始上傳其他參考獲取剪切板內容，控制圖片粘貼在線代碼編輯器事件說明 Markdown編輯器選用https://simplemde.com它是一款純js實現的markdown編輯器。缺點不支持圖片上傳。那我們就得改造它。simplemde是基于co...

FullStackDeveloper 2019-08-20 12:09 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 評論0 收藏0