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

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

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

ImageClipboard

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

安裝

能夠使用bower很簡單的安裝，若是沒有安裝bower，請先安裝bower,安裝使用說明見：[bower：客戶端庫管理工具]。

bower install image-clipboard

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

<div id="box"></div>
<script type="text/javascript" src="ImageClipBoard.min.js"></script>
<script type="text/javascript">

 var clipboard = new ImageClipboard('#box', function (base64) {
    //do stuff with pasted image
 });

  //onpaste-callback can also be passed as second argument
  //in the constructor above.
 clipboard.onpaste = function (base64) {
    //do stuff with the pasted image
  });

  //you can also pass in single DOM-element instead of 
  //query as the first parameter.

</script>

運行以上代碼後，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

參考資料

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

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