实现网页粘贴粘贴板图片的 javascript 脚本

我们现在要做这个事情:

先来测试一下这个神奇的效果:http://pixieengine.com/pixel-editor

在 QQ 打开的情况下按 Ctrl+Alt+A 截图,选择截图之后就会将图片内容放入剪贴板。

然后在上面这个图片编辑器里面选择粘贴,你会发现图片已经粘进去了!

So! Haha,现在就大有文章可做啦!这是怎么实现的呢?

终于被我找到这篇好文,不用自己造轮子了,直接拿来主义!

http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

// Created by STRd6
// MIT License
// jquery.paste_image_reader.js
(function($) {
  var defaults;
  $.event.fix = (function(originalFix) {
    return function(event) {
      event = originalFix.apply(this, arguments);
      if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
        event.clipboardData = event.originalEvent.clipboardData;
      }
      return event;
    };
  })($.event.fix);
  defaults = {
    callback: $.noop,
    matchType: /image.*/
  };
  return $.fn.pasteImageReader = function(options) {
    if (typeof options === "function") {
      options = {
        callback: options
      };
    }
    options = $.extend({}, defaults, options);
    return this.each(function() {
      var $this, element;
      element = this;
      $this = $(this);
      return $this.bind('paste', function(event) {
        var clipboardData, found;
        found = false;
        clipboardData = event.clipboardData;
        return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
          var file, reader;
          if (found) {
            return;
          }
          if (type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType)) {
            file = clipboardData.items[i].getAsFile();
            reader = new FileReader();
            reader.onload = function(evt) {
              return options.callback.call(element, {
                dataURL: evt.target.result,
                event: evt,
                file: file,
                name: file.name
              });
            };
            reader.readAsDataURL(file);
            return found = true;
          }
        });
      });
    });
  };
})(jQuery);

还在忍受写 WordPress 文章的时候截图发图不方便的苦恼吗?现在有办法了吧!快来一起写一个 WordPress 插件,将这门技术引入到你所有需要贴图的地方吧!

Er… 后来发现,其实轮子也不用自己做了,WP 里面有一个叫做 Image Elevator 的插件,直接就可以用上了,马上鸟枪换炮了!


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2016/01/%e5%ae%9e%e7%8e%b0%e7%bd%91%e9%a1%b5%e7%b2%98%e8%b4%b4%e7%b2%98%e8%b4%b4%e6%9d%bf%e5%9b%be%e7%89%87%e7%9a%84-javascript-%e8%84%9a%e6%9c%ac.html【实现网页粘贴粘贴板图片的 javascript 脚本】

发表评论

电子邮件地址不会被公开。 必填项已用*标注