资讯专栏INFORMATION COLUMN

js 粘贴图片的应用(clipboardData)

Euphoria / 1039人阅读

摘要:起因应项目需求,需要用某个工具截图然后粘贴上传到后台的功能于是着手搜查资料,最终的结果就是找到了这个对象,然后开始着手一谷歌浏览器相信这个也是很多开发者都在用的浏览器,当然也是尝试的开始。

clipboardData

起因:应项目需求,需要用某个工具截图然后粘贴上传到后台的功能!于是着手搜查资料,最终的结果就是找到了这个对象clipboardData,然后开始着手!

一、谷歌chrome浏览器

相信这个也是很多开发者都在用的浏览器,当然也是尝试的开始。整个过程是这样的

</>复制代码

  1. 1)使用微信截图
  2. 2)`"⌘+v, ctrl+v"`在这个页面的随意位置粘贴
  3. 3)执行上传图片到后台的流程(产生loading状态)

</>复制代码

  1. document.body.addEventListener("paste", files, false)
  2. //files是一个方法,里面的参数为event
  3. function files(event) {
  4. //谷歌浏览器的的粘贴文件在这个对象下面
  5. if (event.clipboardData || event.originalEvent) {
  6. var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
  7. //获取文件的属性就在这里获取,打印该对象可以看到相关属性,结果的操作就在items里面,所以需要循环items
  8. let fileObj = null
  9. for (var i = 0; i < len; i++) {
  10. // console.log(items[i]);
  11. if (items[i].type.indexOf("image") !== -1) {
  12. //getAsFile() 此方法只是该浏览器下才会有的方法
  13. fileObj = items[i].getAsFile();
  14. }
  15. }
  16. if(fileObj !== null) {
  17. fileObj就是一个文件对象,此刻就可以进行文件的处理了,例如用formdata的形式传递给后台,这个自行百度,本片章不与讲述。
  18. }
  19. }
  20. }

如果需要在页面中显示可以有两种方法显示图片

</>复制代码

  1. 第一种
  2. 在上面的代码if处接着写
  3. if(fileObj !== null) {
  4. var fileUrl=URL.createObjectURL(blob);
  5. document.getElementById("imgNode").src=fileUrl;
  6. }

URL是一个公用的对象

</>复制代码

  1. 第二种方法是用base64的方法可以实现, 需要借助FileReader对象
  2. var reader = new FileReader();
  3. reader.onload = function (event) {
  4. //event.target.result 即为图片的Base64编码字符串
  5. var base64_str = event.target.result;
  6. document.getElementById("imgNode").src=base64_str;
  7. }
  8. reader.readAsDataURL(blob);

以上就是在谷歌浏览器中实现的方法了!但是仅限在谷歌浏览器,因为此项目在mac上开发,所以就尝试了在safari中试着运行,结果一点反应都没有,哎,相继查了很多的资料才懂了一点点,这里也就简单的分享下,希望对这一块比较有深入了解的人来评论、指导下我。

问题1

document.body下的onpaste不起作用,现在也没有查到,于是乎只能在div(contenteditable)下尝试了一下下。但是发现clipboardData下面并没有items这个对象,所以上面的方法也就不成立了,具体的哪些数据可以参考这篇文章,上面介绍了他属性的一些要求,所以只能另谋方法了!查阅了好多资料明白了一些!
safari粘贴的数据根本就没有存在clipboardData这个对象下,而是在这个div下添加了一个图片,新建了一个img标签,然后src指向本地的blob链接数据,不信的话你们可以自己打印一下。

</>复制代码

  1. 所以想要获取对象只能这样了,具体代码如下,借助jq
base64转换为blob对象

</>复制代码

  1. function dataURLtoBlob(dataURL, sliceSize) {
  2. var b64Data, byteArray, byteArrays, byteCharacters, byteNumbers, contentType, i, m, offset, ref, slice;
  3. if (sliceSize == null) {
  4. sliceSize = 512;
  5. }
  6. if (!(m = dataURL.match(/^data:([^;]+);base64,(.+)$/))) {
  7. return null;
  8. }
  9. ref = m, m = ref[0], contentType = ref[1], b64Data = ref[2];
  10. byteCharacters = atob(b64Data);
  11. byteArrays = [];
  12. offset = 0;
  13. while (offset < byteCharacters.length) {
  14. slice = byteCharacters.slice(offset, offset + sliceSize);
  15. byteNumbers = new Array(slice.length);
  16. i = 0;
  17. while (i < slice.length) {
  18. byteNumbers[i] = slice.charCodeAt(i);
  19. i++;
  20. }
  21. byteArray = new Uint8Array(byteNumbers);
  22. byteArrays.push(byteArray);
  23. offset += sliceSize;
  24. }
  25. return new Blob(byteArrays, {
  26. type: contentType
  27. });
  28. };
base64 转为 文件对象

</>复制代码

  1. function dataURLtoFile(dataurl, filename) {
  2. var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1],
  3. bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  4. while(n--){
  5. u8arr[n] = bstr.charCodeAt(n);
  6. }
  7. return new File([u8arr], filename, {type:mime});
  8. }
查找浏览器添加的图片标签

</>复制代码

  1. var _checkImagesInContainer = function(that,cb) {
  2. var img, j, len, ref, timespan;
  3. timespan = Math.floor(1000 * Math.random());
  4. ref = that.find("img");
  5. for (j = 0, len = ref.length; j < len; j++) {
  6. img = ref[j];
  7. img["_paste_marked_" + timespan] = true;
  8. }
  9. return setTimeout((function(_this) {
  10. return function() {
  11. var k, len1, ref1;
  12. ref1 = _this.find("img");
  13. for (k = 0, len1 = ref1.length; k < len1; k++) {
  14. img = ref1[k];
  15. if (!img["_paste_marked_" + timespan]) {
  16. cb(img.src);
  17. $(img).remove();
  18. }
  19. }
  20. };
  21. })(that), 1);
  22. };
结果运行

</>复制代码

  1. _handleImage = function(src, e, name) {
  2. var loader;
  3. loader = new Image();
  4. loader.crossOrigin = "anonymous";
  5. loader.onload = (function(_this) {
  6. return function() {
  7. var blob, canvas, ctx, dataURL;
  8. canvas = document.createElement("canvas");
  9. canvas.width = loader.width;
  10. canvas.height = loader.height;
  11. ctx = canvas.getContext("2d");
  12. ctx.drawImage(loader, 0, 0, canvas.width, canvas.height);
  13. dataURL = null;
  14. try {
  15. dataURL = canvas.toDataURL("image/png"); //使用这个图片的时候需要加入这个属性crossOrigin,因为需要开启允许跨域
  16. blob = dataURLtoBlob(dataURL);
  17. console.log(dataURLtoFile(dataURL, "test"))
  18. } catch (error) {}
  19. if (dataURL) {
  20. // _this._target.trigger("pasteImage", {
  21. // blob: blob,
  22. // dataURL: dataURL,
  23. // width: loader.width,
  24. // height: loader.height,
  25. // originalEvent: e,
  26. // name: name
  27. // });
  28. }
  29. };
  30. })(this);
  31. return loader.src = src;
  32. };
  33. $(".input").on("paste", function (event) {
  34. _checkImagesInContainer($(".input"), function (src) {
  35. _handleImage(src, $(".input"))
  36. })
  37. })

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

转载请注明本文地址:https://www.ucloud.cn/yun/94283.html

相关文章

  • js获取剪切板内容,js控制图片粘贴

    摘要:在用户执行粘贴操作的时候,能够获得剪切板的内容,本文讨论一下这个问题。目前只有支持获取剪切板中的图片数据。这么多的判断条件,基本可以确定通过剪切板过来的是粘贴的文件。 在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题。 目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支持Chrome和Safari,一些Chrome的新特性是可以尽情使...

    KaltZK 评论0 收藏0
  • 【在网页中获取截图数据】Chrome和Firefox下实战经验

    摘要:最近在实现一个功能,需求如下前提当前页面无弹窗页面任意位置执行粘贴读取剪切板中的截屏数据上传截图首先还是从网上找相关的例子。找到了上的专栏文章获取剪切板内容,控制图片粘贴。 最近在实现一个功能,需求如下: 前提:当前页面无弹窗 页面任意位置执行粘贴 读取剪切板中的截屏数据 上传截图 首先还是从网上找相关的例子。 找到了SF上的专栏文章《js获取剪切板内容,js控制图片粘贴》。 于是...

    vslam 评论0 收藏0
  • js利用clipboardData在网页中实现截屏粘贴功能

    摘要:最近在做一个将屏幕截图直接粘贴发送的功能,于是对此做了一些研究,下面是具体的实现代码代码如下,在这里只是简单的做了一个框用作演示截屏粘贴具体实现在中保存在剪贴板中的数据类型判断是否为图片数据读取该图片下面是讲粘贴的图片内容传送到后端进行 最近在做一个将屏幕截图直接粘贴发送的功能,于是对此做了一些研究,下面是具体的实现代码:html代码如下,在这里只是简单的做了一个textare框用作演...

    cuieney 评论0 收藏0
  • js实现图片粘贴上传到服务器并展示

    摘要:如果有错误,,可通过下文中的监听函数拿到该错误码进行自定义处理是一个数组,返回若干图片的线上地址图片地址图片地址参考部分 最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener(paste, function (event) { consol...

    imingyu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<