剪切板粘贴上传图片功能的javascript实现

anyway 发布于2019-08-19 18:17 / 1065人阅读

摘要：平时的开发中我们难免要上传一些网页截图图片等，传统的选择文件上传使用起来不方便，这里介绍一种使用和实现的剪切板黏贴上传图片功能。剪切板中图片的获取与上传通过，我们可以以的形式获取到剪切板中的图片，然后将数据作为参数通过的方式传输到服务器端。

平时的开发中我们难免要上传一些网页截图、图片等，传统的选择文件上传使用起来不方便，这里介绍一种使用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清除剪切板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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