jSignature is a simple plug-in that simplifies signing in a browser window and allows users to write signatures with a mouse, pen, or finger. The following article will share with you a jsignature Chinese development tutorial, and briefly understand the usage of the jsignature plug-in. I hope it will be helpful to everyone!
jSignature captures signatures through vector outlines of strokes. jSignature can output PNG images and has great flexibility.
github：https://github.com/brinley/jSignature
http://www.unbolt.net/jSignature/ Part of English document
This article will finally bring a complete digitally signed demo and background processing PHP version. Please see the QQ group account at the bottom and enter the download. I want more people to join. Communicate and avoid detours
Please note that the best version of jquery you have used is relatively new. Mine is jquery2.1.4, and the version of jSignature is jSignature v2, because the newer the version, the better the effect of writing on h5 flow.
Please note that this document is based on the translation of the old version and some repairs based on personal experience
Finally there are some tips and personal experience
Note:
The latest version of this plug-in supports IE8. Please test on the local server and do not open it directly because some js file request protocols do not support the windows local file protocol
Differences between file:// and http requests
If you don’t know the difference in how to request the protocol, please don’t worry, go directly to the local server to test
base30 (alias image/jSignature; base30) (EXPORT AND IMPORT) (VECTOR) (VECTOR) (VECTOR) (VECTOR) (VECTOR) (VECTOR) The data format is A Base64 based compression format for ridiculous compactness and native url compatibility. It is a "native" data structure compressed into a compact string representation of all vectors. Code examples (.Net, PHP, Ruby) to unpack this format into a renderable format (SVG, language-native coordinate array) are provided in the extras folder. One possible method of transferring data to the server is JSONP, which has a real URL length limit of no more than 2000 characters (imposed by IE). This compressed format is local URL compatible and requires no re-encoding, but fits within the 2000 characters of most non-complex signatures.
svg (alias image/svg xml) (EXPORT ONLY) (VECTOR) (VECTOR) data format generates signatures for SVG images (SVG XML text). All strokes are denoised and smoothed. This format is a good medium between "easy to view" and "highly scalable". Most browsers currently support viewing SVG, however, this format can be infinitely scaled and enhanced for printing. The data is text and is easy to store and transfer. The call to jSignature("getData", "svg") returns an array of the form ""image/svg xml","svg xml here"].
svgbase64 (alias image/svg xml; base64) (EXPORT ONLY) (VECTOR) Same as the "svg" plugin, but compresses the SVG XML text using base64 encoding. Although many browsers now have base64 encoders built in ( btoa()), but some like Internet Explorer don't. The plugin has its own (short and efficient) copy of the software-based base64 encoder that is called on browsers that lack btoa(). Right The call to jSignature("getData", "svgbase64") returns an array of ["image/svg xml;base64", "base64 encoded svg xml here"). This two-component array can easily be turned into data-url formatted characters String("data:" data.join(",")), or converted to args and passed to the server as a form value.
image (EXPORT ONLY) (BITMAP) data format is basically the same as the "default" data format above, but is parsed so that the mimetype and data are separate objects in an array structure similar to that produced by the "svg" export. Example (shortened) ["image/ png;base64","i123i412i341jijalsdfjijl234123i..."]. Because the image export filter depends on (somewhat thin) browser support and picks up unnecessary data, it is recommended to use it only for demonstration and development.
Choose export/storage format
#I know you are trying to get the "image" from jSignature, but, please control yourself and Stay away. Instead, consider capturing "base30" or "svg" data on the post-production server side and enhance the rendering.
If you export as a "bitmap", the image will retain the actual drawing colors, sizes, defects, and The bottom line is that may not work on all browsers.
The decoration (signature line) will be on the image. If jSignature is designed with a dark background light pen color then you will have What you get on the image - a dark background with a light drawing covering the gray signature line. This image is almost useless when printed. This would be the case if your background was the same intensity as the pen (e.g. blue for red) Worse, in this case, when printed in black and white, the image is just a dark gray rectangle. If you change the page colors, the captured images now start wearing those colors.
Android 1.6 -2.2 (2.3?) does not support canvas.toDataURL method - bitmap export function.
Small screens (mobile phones) produce tiny ugly bitmaps.
Canvas exported bitmaps have GARGANTUAN dimensions compared to vectors because it preserves all intermediate shadow and background pixels.
If you want to force yourself to capture only black on top of the web style using a white signature, use a bitmap export. If you want to make your database administrator scream because a backup of the database with all bitmap data will take more than a day, use bitmap export. If you want your sales/business department to scream at you because your signature capture format cannot be easily integrated into a new well-designed wizbang product/service, use bitmap export. If you want to explain why the selected siganture format export is not available for all target platforms, use bitmap export. If you want to take the easy route now and make the IT guy come in after you're fired and have the difficult task of applying an ImageMagic smart card to the mess of colorful pixels you decided to collect, use the bitmap export format.
The above is the detailed content of jsignature Chinese development tutorial. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s
How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute
jQuery is a popular JavaScript library widely used in web development. During web development, it is often necessary to dynamically add new rows to tables through JavaScript. This article will introduce how to use jQuery to add new rows to a table, and provide specific code examples. First, we need to introduce the jQuery library into the HTML page. The jQuery library can be introduced in the tag through the following code:
