关于在图片上标记矩形和文字的js插件

因为最近要做一个有关图片标记的网站,所以需要找一个可以达到下图效果的插件,但是找了好多天都没有头绪,哪位大神看到过类似的插件,可否推荐一下,非常感谢图片说明图片说明图片

0

1个回答

https://github.com/djpate/jTag
jQuery插件-jTag,它能让你在图片的任意地方点击并添加描述性的标记。
找了好一会,望采纳~

1
weixin_42413768
刘诗琪 回复a_leading: 你好 这个网站的效果我继续用,但是我不知道怎么下载,您能告诉我一下吗?
大约一年之前 回复
a_leading
天涯忆归人 非常感谢你~这种是点击图片就会跳出框,你知道有那种可以自己拖出矩形框的插件吗?或者这个插件可以改进为自动拖矩形框?再次感谢~
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
图片上添加标记
图片上添加标记,非常不错,信不信由你,反正我是信了
想在对图片进行矩形标记
小弟有个需求 需要对图片进行矩形标记,当点击 编辑图片区域时 可以在图片中画矩形标记 rnrn我现在只能用listview把图片都加载出来,但是对画矩形标记不知道怎么处理rn求大佬给点意见 或者说下用到的相关知识点rn 如图 rn[img=https://img-bbs.csdn.net/upload/201805/21/1526915756_305681.jpg][/img]rnrn
关于图片和文字的问题
我建立了一个RichTextView,在其中包含有图片和文字,我想让图片在排版的时候不出现那种图片占一行的情况,因为这样会空出很多的地方,即要有word中那种图片浮于文字上方的效果,还有,当文档中有图片时,如果双击图片,会自动打开画笔,这也是我不想要的,怎么样屏蔽掉呢?请大家帮忙。每个问题100点,绝不食言.
去掉图片上的文字的技巧
去掉图片上的文字的技巧 可以模仿真人一样,可以制作图片等等
扣除图片上文字的工具
一个字把图片上的文字去掉,又不伤图片本身,还有教程!
关于图片代替文字的语义化
经常使用 text-indent:-9999px; 隐藏字体来达到语义化,但是今天出现了问题,我在一个标签上图片代替文字,做一个抽奖按钮, 按钮转动的时候,页面出现了滚动条,页面的宽度和高度都变大很多,找来找去才发现是text-indent的问题 偏移掉字体的方式是  text-indent:-9999px;  可是他有一个局限性 他只适用于块级元素block  l
关于图片和文字的显示问题
首先,可以看看这个网络请求的地址:rnhttp://m.weather.com.cn/data/101020100.htmlrn这个地址是中央台的天气预报有关于上海地区的天气信息,返回的是JSON的数据:rn"weatherinfo":"city":"上海","city_en":"shanghai","date_y":"2014年3月4日","date":"","week":"星期二","fchh":"11","cityid":"101020100"weather1":"小雨转多云","weather2":"多云转阴","weather3":"小雨","weather4":"小雨","weather5":"小雨转阴","weather6":"多云","img1":"7","img2":"1","img3":"1","img4":"2","img5":"7","img6":"99","img7":"7","img8":"99","img9":"7","img10":"2","img11":"1","img12":"99","img_single":"7","img_title1":"小雨","img_title2":"多云","img_title3":"多云","img_title4":"阴","img_title5":"小雨","img_title6":"小雨","img_title7":"小雨","img_title8":"小雨","img_title9":"小雨","img_title10":"阴","img_title11":"多云","img_title12":"多云","img_title_single":"小雨","wind1":"东北风3-4级转北风4-5级","wind2":"北风4-5级转东北风3-4级","wind3":"东风4-5级","wind4":"东风转东北风4-5级","wind5":"东北风3-4级","wind6":"东北风转东风3-4级","fx1":"东北风","fx2":"北风","fl1":"3-4级转4-5级","fl2":"4-5级转3-4级","fl3":"4-5级","fl4":"4-5级","fl5":"3-4级","fl6":"3-4级","index":"较冷","index_d":"建议着厚外套加毛衣等服装。年老体弱者宜着大衣、呢外套加羊毛衫。","index48":"较冷","index48_d":"建议着厚外套加毛衣等服装。年老体弱者宜着大衣、呢外套加羊毛衫。","index_uv":"最弱","index48_uv":"最弱","index_xc":"不宜","index_tr":"适宜","index_co":"较舒适","st1":"10","st2":"3","st3":"9","st4":"2","st5":"7","st6":"2","index_cl":"不宜","index_ls":"不宜","index_ag":"易发"rnrn对于这部分数据我用了以下几个方法解析和在手机上显示:rn[code=csharp]using System;rnusing System.Collections.Generic;rnusing System.Linq;rnusing System.Net;rnusing System.Windows;rnusing System.Windows.Controls;rnusing System.Windows.Documents;rnusing System.Windows.Input;rnusing System.Windows.Media;rnusing System.Windows.Media.Animation;rnusing System.Windows.Shapes;rnusing Microsoft.Phone.Controls;rnusing Newtonsoft.Json;rnusing Newtonsoft.Json.Linq;rnusing System.Windows.Media.Imaging;rnrnnamespace Weatherrnrn public partial class MainPage : PhoneApplicationPagern rn WeatherInfo weather = null;rn string[] weekMsg = "星期一","星期二","星期三","星期四","星期五","星期六","星期日";rn // 构造函数rn public MainPage()rn rn InitializeComponent();rn rnrn private void PageLoad(object sender, RoutedEventArgs e)rn rn WebClient client = new WebClient();rn client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wb_DownloadStringCompleted);rn client.DownloadStringAsync(new Uri("http://m.weather.com.cn/data/101020100.html",UriKind.Absolute));rnrn rn //下载完成后的处理事件rn void wb_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) rnrn //判断现在是否成功rn if(e.Result.Length<=0||e.Error!=null||e.Cancelled)rn MessageBox.Show("获取天气信息失败!");rn return;rn rn //创建解析对象rn JObject json = JObject.Parse(e.Result);//解析网络请求的结果rn weather = new WeatherInfo()rn rn city = (string)json["weatherinfo"]["city"],rn cityid = (string)json["weatherinfo"]["cityid"],rn date_y = (string)json["weatherinfo"]["date_y"],rn wind = (string)json["weatherinfo"]["wind1"],rn info = (string)json["weatherinfo"]["info"],rn temp1 = (string)json["weatherinfo"]["temp1"],rn temp2 = (string)json["weatherinfo"]["temp2"],rn temp3 = (string)json["weatherinfo"]["temp3"],rn temp4 = (string)json["weatherinfo"]["temp4"],rn temp5 = (string)json["weatherinfo"]["temp5"],rn temp6 = (string)json["weatherinfo"]["temp6"],rn weather1 = (string)json["weatherinfo"]["weather1"],rn weather2 = (string)json["weatherinfo"]["weather2"],rn weather3 = (string)json["weatherinfo"]["weather3"],rn weather4 = (string)json["weatherinfo"]["weather4"],rn weather5 = (string)json["weatherinfo"]["weather5"],rn weather6 = (string)json["weatherinfo"]["weather6"],rn week = (string)json["weatherinfo"]["week"],rn ;rn UpdateUi();rn rn //跟新UI信息rn void UpdateUi()rn rn day1.Temp = weather.weather2;rn day2.Temp = weather.weather3;rn day3.Temp = weather.weather4;rn day4.Temp = weather.weather6;rn today_date.Text = weather.date_y;rn today_temperature.Text = weather.temp1;rn today_week.Text = weather.week;rn today_describle.Text = weather.info;rn this.cityname.Text = weather.city;rn int i;rn for (i = 0; i < 7; i++)rn rn if (weekMsg[i] == weather.week)rn break;rn rn day1.Weekday = weekMsg[(i + 1) % 7];rn day2.Weekday = weekMsg[(i + 2) % 7];rn day3.Weekday = weekMsg[(i + 3) % 7];rn day4.Weekday = weekMsg[(i + 4) % 7];rn day1.ImageUri = GetImgUri(weather.temp2);rn day2.ImageUri = GetImgUri(weather.temp3);rn day3.ImageUri = GetImgUri(weather.temp4);rn day4.ImageUri = GetImgUri(weather.temp5);rn today_image.Source = new BitmapImage(new Uri(GetImgUri(weather.temp1),UriKind.Relative));rn rn //返回天气图片的Urirn String GetImgUri(string weather)rn rn string uri = "/Weather;component/Images/";rn if (weather == "晴")rn rn return uri + "sunday.jpg";rn rn else if (weather == "阴")rn rn return uri + "overcast.jpg";rn rn else if (weather == "雷阵雨")rn rn return uri + "ThunderShower.jpg";rn rn else if (weather.Contains("多云"))rn rn return uri + "cloudy.jpg";rn rn else if (weather.Contains("雨"))rn rn return uri + "Rain.jpg";rn rn elsern rn return uri + "cloudy.jpg";rn rn rn rn[/code]rn但是发生了很奇怪的事情,所有的图片,和文字过多的部分没有显示出来,这是运行后的结果:rn[img=https://img-bbs.csdn.net/upload/201408/12/1407824172_527166.png][/img]rnrn这里边我要解释一下:json数据不是完整的数据,里边有些字符不允许发出来,我删掉了,如要看完整的可以把上边地址复制到浏览器。我曾经怀疑过是否是因为获得的天气信息如:小雨等,不在我的判断内,所以没有显示,为此,我在里边特地该了一个temp6这个是个多云,但是依然没有显示,而且解析部分的info 也就是json中的index_d这个键值也没有能够显示出来,不知道是什么原因?rn求教了?rn
选取图片部分内容 js插件
选取图片部分内容 js插件选取图片部分内容 js插件选取图片部分内容 js插件选取图片部分内容 js插件
图片懒加载js插件
下载jquery包和jquery.lazyload.js包完整案例(包括需要的jq文件):链接: https://pan.baidu.com/s/1rcr1FAlD9jDTAEZtfHoeog 密码: zv6h多点图片比较明显(注:grep.gif是默认图  前面是载入的图片)&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional/...
图片滑动验证码js插件
图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的坐标。 先上代码吧,做个备份记录 jquery.lgymove.js   /** * Created by lgy on 2017/10/21. * 图片验证码 */ (function ($) { $.fn.imgcode = functio...
图片热区js插件
图片热区,自由编辑页面模型和自定义链接,只要用idea直接就可以用浏览器打开,注释应有尽有
如何得到包围文字的矩形?
请教高手:rn输出一行文字,rn 如何得到包围文字的最小矩形?
滑动图片验证的JS插件
滑动图片验证的JS插件,随机获取图片库中的图片,然后使用canvas裁剪生成,鼠标向右滑动,将缺失部分图片滑动到对应的位置,坐标位置,计算拖动速度等等来判断是否人为操作.
列表框的文字的字体大小如何标记
我的方法是:rn rn 中国rn 美国rn rn但不起作用啊
饼图-图例标记及文字的设置
1、源码 app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} &lt;br/&gt;{b}: {c} ({d}%)" }, legend: { left:250, top:40, width...
图片全屏显示——js插件
图片全屏显示,其宽高随着窗口的改变而改变 代码下载 http://download.csdn.net/download/u010127996/9498395 说明: ①.h 表示该图片上方部份内容 ②.ct表示该图片下方部分内容 ③当上部内容可见时img的position为absolute   当网页滑到上部内容看不见时img的position为fixed
关于html的table转成图片的js插件dom-to-image
关于把html页面中的table表格,转成图片显示。这方面的需求可能在实际开发中,可能会遇到展示的表格转换成图片上传服务器或者其他处理,一般是遇不到。记录一款还不错的插件, dom-to-image var node = document.getElementById(‘table’); domtoimage.toPng(node) .then(function (dataUrl)
photoshop去除图片上文字的方法
我们下载的图片上常会有一些不想要的文字, 如何才能去除而不失美观呢?使用photoshop能够帮你解决这个令人头疼的问题。
提取图片上文字的两种方法
目前我整理出两种方法: 第一种是利用onenote 插入照片——>点击图片右键,选择“复制图片中的文本”选项——>在当前onenote的空白处选择粘贴就好了(在其他地方粘贴是无效的) 第二种方法利用手机QQ 将图片发往聊条记录——>点击按住图片——>选择“提取图片中文字”选项——>等待一会,提取完成——>点击右下角的”…”处,点击”发送给好友”或者“加入收藏”,就实现了文字的提取。
整理图片上文字的快捷方法
还在手工录入图片上的文字吗?现在科技如此发达,相应的软件早已经被开发出来,下面就让小编来给大家介绍一款能够快速整理图片上文字的方法吧——捷速ocr文字识别软件。   捷速OCR文字识别软件是一款超级无敌的文字识别软件,软件的功能非常的强大,能支持多国家支持多国字符和彩色文件识别,可以识别和转换几乎所有打印的文档类型和文件格式(如:JPG、GIF、PNG、BMP、TIF和PDF源文件、PD
一个从图片上获取文字的软件!!
哪们能推荐一下!rn
请问有没有读取图片上文字的开发包??
请问有没有读取图片上文字的开发包??
可以识别图片上的文字的小程序
微信上的小程序相信大家都不陌生,近年来,微信小程序从“跳一跳”之后,越发火了。由于小程序的出现,微信上的功能也逐渐增加了,今天就给大家介绍一个小程序,比较实用,它可以快速识别图片上的文字,这个小程序呢就叫“迅捷文字识别”。 这是一个比较智能的文字识别的小程序,它可以将识别出来的字汉英互译,还可以直接拍照翻译,接下来就给大家介绍一下这个小程序的操作方法。 1.首先,我们现在微信上找到这个程序,点...
修改系统TabBar上图片和文字的颜色
1.在使用系统的tabBar的时候,无论图片和文字的颜色是什么,系统默认的都会是蓝色,这是因为默认情况下,系统是有渲染效果的,下面介绍如何去除系统默认的渲染效果: // 添加图片之前先把图片的渲染效果给去除 UIImage * image = [UIImage imageNamed:imageName]; // imageWithRenderingMode 图片的渲染模式  UIIma
求 在图片上加文字的组件。谢谢
在原图上加上文字生成一个新图
如何实现图片上显示文字的效果
如何实现图片上显示文字的效果http://www.cohesionfreight.com.cn/EmailUI/websites/hk/en/submenu.asp?id=Contact_Us这个里面的相片效果,rn要求是我的mouse移上去会显示相应的人名,本人能力有限,只能用最笨的方法,rn rn通过设置li的背景为一图片,当mouse移上去的时候img里面的图片透明度降低,刚li的背景图片就显示出来,背景图片上面有对应该相片的名字。rn现在我想问下大家有没有更好的方法,因为我的相片好多,不可能每一张相片都去做一张相应的背景图片来充当名字。。rn
ps去掉图片上的文字的6种方法
[url]http://www.360doc.com/content/11/0503/09/6564694_113879346.shtml[/url]
制作网页时在图片上输入文字的问题
我在制作网页时很多时候需要在图片上输入文字,用Photoshop和Frieworks分别都做过,但出来的效果都是带有一点蒙胧的效果,显示都不怎么理想。但别人的网站图片上的中文就显示得很好、很清晰。我想问一下高手都是用什么软件在图片上输文字的。出来的效果最好是清晰一点的。rnPS:我一般是在Photoshop里面的有个“T”型的那个文字选项里做的。有强、明晰、平滑几个选项那个。
PS去掉图片上的文字的6种基本方法
工作中经常为图片上的文字烦恼,教你一个简单的去除方法。
一个在图片上写入文字的问题。
我在图片上写入文字时发现,有时候图片太小,文字就不能完全写入图片,我想问问大家rn能否有中方法,不管图片大小,写入的字符串不会溢出?
怎样获得图片上的带有文字的区域
我现在有一福图片,图片上有文字,我将怎样知道我鼠标点击的是文字部分呢?假设图片上的文字有几句话,我怎样知道我鼠标点击部分所在的那句话呢/rnrnrnrn 我的想法不知道能实现吗?请大虾帮忙吧!!!!!多谢!!
★★★★★< 求图片上显示文字的代码 >★★★★★
有一副图片,想在上面显示文字。。怎么实现???
图片标记
#include "stdafx.h" #include "cxcore.h" #include "cvcam.h" #include "windows.h" #include "cv.h" #include "highgui.h" #include "iostream" #define ANY_IMAGE 2 void callback(IplImage* image); in
响应式图片-标记图片
性能 现实中移动网络的实际情况是文件请求次数和请求文件的大小同样重要,也就是说我们还需要减少请求图片的次数,而不仅仅是图片文件的大小。我们所谓的延时(latency)是指请求与响应之间存在的延后问题。 总之性能是真正响应式设计的基本组成部分。在实践中,这意味着你需要减小文件大小的同时,还要减少请求文件的次数。一种较少图片数据的好办法是压缩图片,或者减少图片的数量。接下来会介绍一些方法来实现无需...
在Picturebox中图片上绘制矩形
事先通过以下方法为picturebox1添加图片rn[code=C#]rn private void toolStripButton1_Click(object sender, EventArgs e)rn rn OpenFileDialog open = new OpenFileDialog();rn open.Filter = "文本|*.jpg";rn open.InitialDirectory = Directory.GetCurrentDirectory();rn open.RestoreDirectory = true;rn if (open.ShowDialog()==DialogResult.OK)rn rn backpicture = open.FileName;rn curimage = Image.FromFile(backpicture);rn rn if (curimage != null)rn rn pbitmap = new Bitmap(curimage);rn pictureBox1.Image = pbitmap;rn getbitmaparr(pbitmap);rn rn rn[/code]rnrn然后再通过在picturebox1上的单击事件绘制矩形这个矩形的绘制函数写在picturebox1的Paint事件中如程序rn[code=C#]rnGraphics recte = e.Graphics;//pictureBox1.CreateGraphics(); rn ivisible = newf.iwires;rn itemp = iarrbitmapindex * ivisible;rn ilocationy = (itemp / curimage.Width) * ivisible; //得到Y坐标rn ilocationx = itemp % curimage.Width; //得到X坐标rn Pen rectpen = new Pen(Color.Green, 2);rn Rectangle rect = new Rectangle(ilocationx, ilocationy, ivisible, ivisible); rn recte.DrawRectangle(rectpen, rect);rn rectpen.Dispose();rn this.Invalidate(true); rn[/code]rn症状是:开始添加图片还很正常,cpu使用率都在一个正常水平,但当我点击图片时,图片上没有反应,这时我把窗口缩小一下(开始时最大化)该软件的CPU的使用率突然达到25%,而且绘制的矩形也出现了,再次点击窗口矩形也能正常画上去;rn这是因为什么啊CPU怎么占用那么高,而且还必须改变一下窗口的大小才能显示
OPENCV实例:在图片上绘制矩形
鼠标绘制矩形,按c清除 程序流程: 1.读取图片srcImage 2.srcImage复制到img和tempImage 3.g_bDrawingBox为假不绘图 4.鼠标按下,g_bDrawingBox为真,开始绘图 5.读取pt1,pt2 6.srcImage实时复制到tempImage(目的:不让绘制的矩形产生重叠),根据pt1和pt2在tempImage绘制矩形,显示在temp...
在图片上建立矩形和多边形的选区?
我想在在图片上建立矩形、弧开和多边形的选区,以在web应用程序中生产热点(热区)?谢谢
如何在一张图片上做标记?
有一张大地图(大图片)和一个点(小图片),如何实现在大图片上任意一点,点击一次则增加一个小图片,即:如何在大地图上做标记?谢谢^_^
在mapcontrol上用图片,做标记
private void DrawSign(double mapx,double mapy) { IPoint pPoint = new PointClass(); pPoint.PutCoords(mapx, mapy); IPictureMarkerSymbol p...
如何统一去掉多个图片上的标记?
我有一些图片,都带有同样的标记,想统一处理掉,不知有什么好方法?(注图片的大小及标记的位置都不一样)