在浏览器中实现图片粘贴的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

有疑问欢迎反馈!

时间: 2014-12-27

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

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

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

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

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

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

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

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

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

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

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

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

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

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插件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 boxy插件在IE中边角图片不显示问题的解决

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

jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

本文实例讲述了jQuery实现鼠标滑过商品小图片上显示对应大图片功能.分享给大家供大家参考,具体如下: 1 . 效果截图 2 . 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery图片变换</title> </head> <style type="text/css"

PHP CURL采集百度搜寻结果图片不显示问题的解决方法

1.根据关键字采集百度搜寻结果 根据关键字采集百度搜寻结果,可以使用curl实现,代码如下: <?php function doCurl($url, $data=array(), $header=array(), $timeout=30){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_HTTPHEADER, $header); curl_setopt($ch, CURLOPT_R

有关easyui-layout中的收缩层无法显示标题的解决办法

easyui-layout中的收缩层无法显示标题的问题原因分析: 在easyui-layout中设置面板初始化为可以折叠,然后就发现标题还有图标都木有了 嗯,就是结果列表上面.一片空白,出现了问题就要去解决它,在网上查了资料之后呢,决定修改jquery.easyui.min.js 版本为:jQuery EasyUI 1.4.1 在5105行有_39d方法,在其中设置两个变量_Cstitle,_CsIcon添加代码如下: var _Cstitle; var _closedTitle = p.pan

ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法 原创

本文实例讲述了ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法.分享给大家供大家参考.具体如下: 在ThinkPHP的config.php中设置: 复制代码 代码如下: 'SHOW_RUN_TIME'=>true; 可以在模板输出运行时间,但是有的时候会出现不显示运行时间的情况. 对此解决方法如下: 打开 ThinkPHP\Lib\Think\Core\View.class.php文件, 在protected function output($content,$disp

AspNet中使用JQuery boxy插件的确认框

JQuery有不少弹出框的插件,boxy应该算的上是功能和效果都还不错的一款了.先来看一张效果图吧. 在Web开发中经常会使用到Alert和Confirm弹出框,在Asp.Net中的删除按钮上我们常常会加上删除的确认提示,以避免误删除数据,就像上面图片那样.我们一般会写出这样的代码. <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>

jQuery幻灯片插件owlcarousel参数说明中文文档

Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度 浏览器兼容:兼容所有浏览器,包括 IE6.IE7. jQuery 兼容:兼容 1.7 及以上版本. Owl Carousel 使用方法: 新建一个HTML文件 1.在HTML文件中引入Owl Carousel必须文件 <link href=

jquery.boxy插件的iframe扩展代码

复制代码 代码如下: /* <a href="a.html" onclick="return $.qbox(this);" > <a href="a.html" onclick="return qBox.iFLoad(this);" > <a href="a.html" onclick="return qBox.iFrame({src:'b.html'})"

Android中超大图片无法显示的问题解决

发现问题 最近在做图片浏览功能时遇到了一个很蛋疼的问题,在开启硬件加速情况下,超大图无法正常显示(图的长宽有一个大于9000),而且程序不会crash,只是图片加载不出来,View显示为黑色.通过查看日志,发现系统打印出了下面的内容: W OpenGLRenderer( 4014): Bitmap too large to be uploaded into a texture (600x9518, max=8192x8192) 从日志内容可以看出,这是由OpenGL打印出来的日志,是由于图片的尺

SpringMVC生成的验证码图片不显示问题及解决方法

近期用SSM框架写一个项目,登录模块需要生成验证码图片,我把相关的代码写好了之后传到 jsp ,但是图片不显示,查看控制台显示404,反复查询了一下代码并没有发现任何问题,代码如下: @Controller public class ValidateCodeController { private static final long serialVersionUID = 1L; private static int WIDTH = 70; // 验证码图片的宽度 private static i