剪切板粘贴上传图片功用的javascript完成

2019年8月30日 211次阅读 来源: Joebon

日常平凡的开辟中我们不免要上传一些网页截图、图片等，传统的挑选文件上传运用起来不方便，这里引见一种运用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

    原文作者：Joebon
    原文地址: https://segmentfault.com/a/1190000005109727
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞