Examples of jquery. picsign image tagging components are described in detail.

Examples of jquery. picsign image tagging components are described in detail.

After several days of experimentation and learning, I encapsulated my first js component. Please kindly advise if you have many shortcomings.

Due to some business requirements, some annotations need to be added to images. Some images are found online but cannot meet the requirements. In addition, there are some bugs and too many pitfalls.

Therefore, I had the idea to encapsulate one by myself. I learned the Implementation ideas of other similar components and the development ideas of js components, and developed the jquery. picsign component.

JQuery image tagging component (jquery. picsign)

Online Demo: http://artlessbruin.gitee.io/picsign/

Gitee: https://gitee.com/ArtlessBruin/PicSign

1. Component dependency

Jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

Bootstrap

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Layer

<link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet"><script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

Webui-popover

<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>

2. Reference component files

<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" /><script src="js/jquery.picsign.js"></script>

3. Use

Add a DIV to the page

<div id="picsign"></div>

Initialize Components

$ ("# Picsign"). picsign (option); // option is a component parameter. For details, see option parameter description.

Option parameter description

Var option = {picurl: null, // The image address signdata: [], // The initial data. For details, see the basic data format editable: {// whether to edit (if editable by default, All edits are disabled if set to false) add: true, // whether update: true can be added, // whether del: true can be modified, // whether to delete move: true // whether it is movable}, signclass: 'signdot ', // popwidth: 400, // The width of the popheight window for displaying the marked content is 247, // note content display window height inputwidth: 400, // note content editing window width inputheight: 247, // note content editing window height beforeadd: function (data) {// method executed before adding and saving, return false to block adding}, onadd: function (data) {// method used to add and complete execution}, beforeupdate: function (data) {// The method executed before the modification is saved, and false is returned to block the modification}, onupdate: function (data) {// method modified to complete the execution}, beforedel: function (data) {// The method executed before the deletion and storage, and false is returned to block the deletion}, ondel: function (data) {// method used to delete the execution completed }};

Basic Data Format

[{Left: '000000', top: '000000', msg: 'This is the annotation information', signid: 'This is the unique identifier of the annotation. You do not need to assign a value. It is related to the component logic, please do not use this keyword '}]

• The data added by the user must contain the left, top, and msg attributes.
  
• You can expand other attributes on your own.
  
• Note: Do not add or use the signid keyword.
  

Method call

$ ("# Picsign"). picsign ('functionname', parameter); // functionName indicates the method name and parameter indicates the method parameter. For details, see method description.

Method description

Obtain annotation data

Method Name: getData

Parameter: None

$("#picsign").picsign('getData');

Add annotation data

Method Name: addSign

Parameter: Json of basic data, whether to trigger the event (true by default)

$("#div_picsign").picsign("addSign", [{ left: '50%', top: '10%', msg: "123"}, { left: '80%', top: '10%', msg: "456"}], true)

Switch annotation display status

Method Name: toggle

Parameter: None

$("#div_picsign").picsign("toggle")

Component destruction

Method Name: destroy

Parameter: None

$("#div_picsign").picsign("destroy")

Summary

The above is a detailed description of the jquery. picsign image annotation component instance introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!