成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

剪切板粘貼上傳圖片功能的javascript實(shí)現(xiàn)

anyway / 1174人閱讀

摘要：平時(shí)的開(kāi)發(fā)中我們難免要上傳一些網(wǎng)頁(yè)截圖圖片等，傳統(tǒng)的選擇文件上傳使用起來(lái)不方便，這里介紹一種使用和實(shí)現(xiàn)的剪切板黏貼上傳圖片功能。剪切板中圖片的獲取與上傳通過(guò)，我們可以以的形式獲取到剪切板中的圖片，然后將數(shù)據(jù)作為參數(shù)通過(guò)的方式傳輸?shù)椒?wù)器端。

平時(shí)的開(kāi)發(fā)中我們難免要上傳一些網(wǎng)頁(yè)截圖、圖片等，傳統(tǒng)的選擇文件上傳使用起來(lái)不方便，這里介紹一種使用js和node實(shí)現(xiàn)的剪切板黏貼上傳圖片功能。當(dāng)我們需要上傳截圖時(shí)，只需手動(dòng)截圖后commond/ctrl+v即可完成圖片上傳。這種方式將大大減少我們?cè)谏蟼鲌D片過(guò)程中花費(fèi)的時(shí)間。

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

ImageClipboard

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

安裝

可以使用bower很簡(jiǎn)單的安裝，如果沒(méi)有安裝bower，請(qǐng)先安裝bower,安裝使用說(shuō)明見(jiàn)：[bower：客戶端庫(kù)管理工具]。

bower install image-clipboard
使用：將剪切板中的圖片黏貼到網(wǎng)頁(yè)中去

運(yùn)行以上代碼后，div#box中會(huì)插入一個(gè)img標(biāo)簽，src即為當(dāng)前剪切板中圖片。

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

通過(guò)ImageClipboard，我們可以以base64的形式獲取到剪切板中的圖片，然后將base64數(shù)據(jù)作為參數(shù)通過(guò)POST的方式傳輸?shù)椒?wù)器端。

瀏覽器端代碼： 
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);
    }
  });

};
服務(wù)器端代碼

服務(wù)器端獲取到base64數(shù)據(jù)，即可將base64數(shù)據(jù)轉(zhuǎn)為圖片存儲(chǔ)或者傳送到其他服務(wù)器。

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：客戶端庫(kù)管理工具 http://javascript.ruanyifeng.com/tool/bower.html

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79407.html

相關(guān)文章

  • js獲取剪切板內(nèi)容，js控制圖片粘貼。

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

    KaltZK 評(píng)論0 收藏0

  • js拖拽粘貼上傳與CodeMirror

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

    FullStackDeveloper 評(píng)論0 收藏0

  • 前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等

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

    mikasa 評(píng)論0 收藏0

  • 前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等

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

    amuqiao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<