在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南

pasteimg是一款可以在浏览器中实现图片粘贴的jQuery插件，兼容Chrome、Firefox、IE11以及其他使用这些内核的浏览器，比如，国内著名的360浏览器。

pasteimg可以识别浏览器中直接复制的图片，也可以识别复制的富文本中的图片。仅仅可以识别在浏览器中复制的内容，操作系统中复制的图片是不能识别的。

pasteimg依赖jQuery，简单易用，引入jQuery和paste.image.js后，调用方式如下：

代码如下:

//在需要监听粘贴事件的dom元素上调用pasteImage方法
//调用pasteImage方法需要传入一个callback参数
//一旦粘贴的内容中发现图片，就会调用callback
//调用callback时，会传入一个数组，包含了所有的图片
//本插件会尽可能的将图片转换成base64编码，但受到跨域的限制，如果不能转换，将返回图片的绝对url路径
$("#container").pasteImage(function(imgs){
  //imgs is array that contain all image, you can do something...
});

插件下载地址：https://github.com/iyangyuan/pasteimg

有疑问欢迎反馈！

赞 (0)

相关推荐

  • jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l

  • JQuery boxy插件在IE中边角图片不显示问题的解决

    JQuery boxy插件在IE中边角图片不显示问题的解决

    JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示.本博文将来解决这个问题.将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件.在boxy.css文件中有给弹出框设置四个角图片的样式,如下图: 不做任何修改在Chrome浏览器下没有问题,如下: 在网上查了一些资料,说将css文件中的图片路径给位全路径可以解决问题,如下: 发现这样修改后并没有作用,运行后效果仍然如下: 有效的解决方法 将上面css截图的下半部分注释掉,如

  • jquery 插件实现瀑布流图片展示实例

    jquery 插件实现瀑布流图片展示实例

    jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示.用户可以无限浏览图片或内容无限加载瀑布流效果. 代码: <script type="text/javascript"> function item_masonry(){ $('.item img').load(function(){ $('.infinite_scroll').masonry({ itemSelect

  • jQuery插件boxScroll实现图片轮播特效

    BoxScroll 常见图片轮播效果的简单实现.可以数字列表控制或者左右按键控制.逻辑很简单,到了尽头得往回跑,看看注释就知道了. 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="" name="keywor

  • jquery图片播放浏览插件prettyPhoto使用详解

    jquery图片播放浏览插件prettyPhoto使用详解

    一.prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频.flash.YouTube.iframe和ajax.而且prettyPhoto配置和使用都十分简单,扩展性也不错,你可以最大限度地自定义prettyPhoto.目前,prettyPhoto兼容大部分主流的浏览器,包括令人纠结的IE6. prettyPhoto插件的项目地址:http://www.no-margin-for-errors.com/p

  • jQuery图片特效插件Revealing实现拉伸放大

    点击图片,图片拉伸放大显示,效果非常棒! 使用方法: 1.head区域引用文件 jquery.js,photorevealer.js,datouwang.css 2.在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码 3.图片个数可以自由增减,增加或者删除<td></td>即可 4.如果图片信息更多,需要更大的空间,可修改photorevealer.js中第36行的数字 核心代码: $(document).ready(functio

  • jQuery插件slicebox实现3D动画图片轮播切换特效

    jQuery插件slicebox实现3D动画图片轮播切换特效

    漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度.autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码. 使用方法: 1.加载插件和jQuery <link type="text/css" rel="stylesheet&

  • jQuery插件实现大图全屏图片相册

    大图全屏图片相册jQuery插件,支持左右按钮切换以及点击大图自动切换图片,基于jQuery插件jQuery.album.js,插件支持参数自定义功能,viewMode:0没有缩略图 1有缩略图  2缩略图.全屏幕.可以对图片进行左右转,具体的参数大家可以查看jQuery.album.js文件,总之效果很不错,喜欢的朋友可学习下 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

  • jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d

  • jQuery插件expander实现图片翻转特效

    jQuery插件expander实现图片翻转特效

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 引入CSS和JS <link href="css/expander.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <script src="js/j

随机推荐