Maison >interface Web >js tutoriel >jsignature tutoriel de développement chinois
jsignature tutoriel de développement chinois
- 青灯夜游avant
- 2022-03-02 09:45:143824parcourir
jSignature est un simple plug-in qui simplifie la signature dans la fenêtre du navigateur et permet aux utilisateurs d'écrire des signatures avec la souris, le stylo et les doigts. L'article suivant partagera avec vous un didacticiel de développement chinois jsignature et comprendra brièvement l'utilisation du plug-in jsignature. J'espère qu'il sera utile à tout le monde !
jSignature capture les signatures à travers les contours vectoriels des traits. jSignature peut générer des images PNG et offre une grande flexibilité.
github : https://github.com/brinley/jSignature
http://www.unbolt.net/jSignature/ Une partie du document anglais
Cet article aura une signature numérique complète à la fin de la démo, la version du traitement en arrière-plan php, veuillez consulter le compte du groupe QQ en bas et entrez le téléchargement. Je souhaite communiquer avec plus de personnes et éviter les détours
Veuillez noter que la meilleure version de jquery utilisée est relativement nouvelle. , le mien est jquery2 .1.4, la version de jSignature est jSignature v2, car plus la version est récente, plus l'effet d'écriture sur h5 est fluide.
Veuillez noter que ce document est basé sur la traduction de l'ancienne version et certaines réparations basées sur une expérience personnelle
Enfin, il y a quelques conseils et expériences personnelles
Remarque :
La dernière version de ce plug- dans prend en charge IE8, veuillez le mettre pour tester Test sur le serveur local, ne l'ouvrez pas directement, car certains protocoles de requête de fichier js ne prennent pas en charge le protocole de fichier local Windows
Différences entre les requêtes file:// et http
Si vous n'êtes pas sûr de la différence dans la façon de demander le protocole, ne vous emmêlez pas, allez simplement tester sur le serveur local
Basiquement utilisé la méthode
<div id="signature"></div>
<script type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jSignature.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#signature").jSignature();
});
</script>Si elle n'est référencée qu'en html5 comme ça
Vous devez utiliser le navigateur.
.jSignature("clair" )Effacer et réinitialiser le canevasgetData
.jSignature("getData", "base30")| importData | .jSignature("importData",dataurl) | |
|---|---|---|
| Paramètres d'options : | ||
| Nom du paramètre | ||
| Valeur par défaut | largeur |
height
définit la hauteur de la toile. Il n'y a pas de valeur % ou px (la nouvelle version peut utiliser des suffixes pourcentage et px)| color | définit la couleur des traits sur la toile. Accepte n'importe quelle valeur hexadécimale de couleur | |
|---|---|---|
| background-color | Définit la couleur d'arrière-plan de la toile. Accepte n'importe quelle valeur hexadécimale de couleur | |
| lineWidth | définit l'épaisseur de la ligne. Accepte toute valeur positive (également la largeur du pinceau de la ligne horizontale par défaut du canevas) 导入图像数据 画布图像导入并保存到数据库后，可以通过其base64编码的字符串轻松显示图像， 要通过jQuery来做，可以使用类似的东西 $("<img class='imported'></img>").attr("src",sig.jSignature('getData', 'base30')).appendTo(sig);或者直接从服务器端输入数据串到img的的src属性中 <img src="<? echo $datastring ?>" /> 您还可以将dataUrl导入到jSignature画布中，以便您可以通过以下JavaScript代码编辑签名 $("#signature").jSignature("importData",dataurl);dataurl是上面使用的相同的数据串。 您可以在下面的演示中通过从其中一个jSignature复制数据字符串，然后单击另一个jSignaure的“导入数据到画布”， 并将数据字符串粘贴到出现的对话框中，从而在下面的演示中看到它 giehub官方版本部分 jSignature是一个jQuery插件，它简化了浏览器窗口中签名捕获字段的创建，允许用户使用鼠标，笔或手指绘制签名。 j签名将签名作为笔画的向量轮廓捕获。 虽然jSignature也可以导出伟大的位图（PNG），提取签名的高度可扩展的行程移动坐标（也称为矢量图像）允许更大的灵活性 进行额外的努力（通过平滑和压力模拟），使得笔画在屏幕上看起来很漂亮，而这些画面由阁下绘制。 所有主要的桌面，平板电脑和手机浏览器的支持。默认情况下使用HTML5画布元素。我们依靠基于canvas元素模拟器Flash（flashcanvas）当实际帆布不支持的浏览器（Internet Explorer 8节下）。 实时jsignature呈现只有装置适当的“漂亮的”逼近我们捕获。捕获的数据总是相同的-我们尽可能捕捉尽可能多的运动坐标。笔触的绘制不同于浏览器的功能，设备的效率，屏幕大小。 捕获的签名的屏幕表示的这种降级和增强是为了确保渲染不会影响捕获的响应性而进行的。 例如，在缓慢渲染设备（Android浏览器，基于FlashCanvas的Canvas仿真）上，平滑被踢出了一个缺口，以补偿捕获的笔画坐标中的巨大差距 - 捕获设备效率低下的结果。 在所有情况下，客户都会对图纸的反应和美观感到高兴。 jSignature可以轻松地将其自己调入现有样式的网站。 jSignature自动检测包装元素上使用的颜色（文字颜色=笔颜色，背景=背景），并自动选择“装饰”（签名行）的令人愉快的中间色调。 jSignature适用于固定和可变宽度的网页设计，以及各种大小的屏幕（手机，平板电脑，电脑屏幕），并且当父元素更改大小时自动重新绘制绘图区域和签名。
将jSignature添加到您的页面 查看源代码树中的libs文件夹。 从那里挑选3个文件： 1、jSignature.min*.js (“*”表示您有选择。 您可以选择常规的以jQuery为中心的构建或特殊的jQuery.NoConflict构建) 2、flashcanvas.js 3、flashcanvas.swf jSignature取决于（至少最新版）jQuery 如果您不打算支持IE 7和8，则不需要下载FlashCanvas文件。 请注意，FlashCanvas是两个文件的连贯一组，分别是flashcanvas.swf和flashcanvas.js，这两个文件必须位于同一个文件夹中。 不要将它们从单独的文件夹托管，因为flashcanvas.js在与其提供的同一文件夹中查找flashcanvas.swf。 不要将flashcanvas.js重命名为其他任何东西，因为它在DOM中通过该名称查找自己，以找出从哪里加载flashcanvas.swf。 jSignature本身有三个不同的代码段转换成一个最小的可部署：:
如果您确定受众受限于特定的浏览器引擎（您可以通过嵌入式浏览器小部件部署，使用类似PhoneGap的部件），您可以卷起袖子并将其放在第1部分。 如果你知道你只需要一个导出/导入插件，那么从最小化的可部署中删除你不需要的插件。 更多自定义数据导出/导入插件可以单独加载，而无需重新设置主要部署。 但是，缩小是有趣和容易的。 只需看看wscript.py文件，并更改几行以包含/排除某些部分。 对于“通用”部署场景（包括旧IE的支持），将其添加到您的页面： <!-- this, preferably, goes inside head element: -->
<!--[if lt IE 9]>
<script type="text/javascript" src="path/to/flashcanvas.js"></script>
<![endif]-->
<div id="signature"></div>
<!-- you load jquery somewhere before jSignature ... -->
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>解释：
API 以下方法暴露在jQuery对象之上：.jSignature（String command，* args） 参数因命令而异。 当提供命令时，命令将是一个带有jSignature命令的字符串。 目前支持的命令：
使用实例： var $sigdiv = $("#signature")
$sigdiv.jSignature() //初始化 jSignature 插件
// after some doodling...
$sigdiv.jSignature("reset") // 清除画布并在其上重新装饰。
// 将签名作为SVG并在浏览器中呈现SVG。
// （!!!来自IMG元素的内联SVG渲染在所有浏览器中都不起作用!!!）
//这个导出插件返回一个数组[mimetype，base64编码的SVG的字符串的签名笔画]
var datapair = $sigdiv.jSignature("getData", "svgbase64")
var i = new Image()
i.src = "data:" + datapair[0] + "," + datapair[1]
$(i).appendTo($("#someelement")) // append the image (SVG) to DOM.
// 获取签名为“base30”数据对
// 数组[mimetype，jSignature的自定义Base30压缩格式的字符串]
datapair = $sigdiv.jSignature("getData","base30")
// 将数据重新导入jSignature。
// 导入插件了解数据网址格式的字符串，如“data：mime; encoding，data”
$sigdiv.jSignature("setData", "data:" + datapair.join(","))数据导入/导出（和插件） 以下插件（数据格式）是主线j签名的一部分，可分发：
svg (alias image/svg+xml) (EXPORTATION UNIQUEMENT) (VECTOR) (VECTOR) le format de données génère des signatures pour les images SVG (texte XML SVG). Tous les traits sont débruités et lissés. Ce format est un bon médium entre « facile à visualiser » et « hautement évolutif ». La plupart des navigateurs prennent actuellement en charge l'affichage du SVG, cependant, ce format peut être mis à l'échelle et amélioré à l'infini pour l'impression. Les données sont sous forme de texte et sont faciles à stocker et à transférer. L'appel à jSignature("getData", "svg") renvoie un tableau de la forme ""image/svg+xml","svg xml here"].
image (EXPORTATION UNIQUEMENT) (BITMAP) le format de données est le même que ci-dessus. Le format de données "par défaut" est essentiellement le même, mais il est analysé de sorte que le type MIME et les données soient des objets séparés dans une structure de tableau similaire à celle produite par l'exportation "svg". Exemple (raccourci) ["image/png;base64", " i123i412i341jijalsdfjijl234123i... ”]. Étant donné que le filtre d'exportation d'images dépend de la prise en charge (quelque peu délicate) du navigateur et récupère les données inutiles, il est recommandé de l'utiliser uniquement pour les démos et le développement
如果使用捕获的签名与“业务”或“打印”或“多个演示场所”有任何关系，则使用“base30”或“svg”数据等矢量格式，并在后期制作中增强+渲染。 “extras”文件夹中可以找到解压缩和样本，基本的渲染代码（.Net，截至2012年2月的PHP）。 您将使用这些为核心，为您自己的渲染逻辑提供可循环的坐标数据数组。 Events（事件） jSignature初始化的dom元素在笔画完成后立即发出“change”事件，并将其添加到存储器中。 （换句话说，当用户完成绘制每个笔画时，如果用户绘制3笔画，则每次笔画完成后，此事件将发出3次）。 以下是您如何绑定到该事件： $("#signature").bind('change', function(e){ /* 'e.target' will refer to div with "#signature" */ })事件通过“线程”（setTimeout（...，3））异步发出，因此您不需要将事件处理程序包装到任何类型的“线程”中，因为jSignature小部件将继续执行，并且不会等待 你要完成你的自定义事件处理程序逻辑。 个人经验和一个完整的php版本demo html部分 //jquery.moblie会和jsignature有冲突，不知道是版本问题，还是代码代码冲突
<script src="__PUBLIC__/hplus/js/jquery.min.js"></script>
<script src="__PUBLIC__/sign/jSignature.min.js"></script>
<script src="__PUBLIC__/hplus/js/plugins/pace/pace.min.js"></script>
<!--<script src="__PUBLIC__/hplus/js/bootstrap.min.js?v=3.3.6"></script>-->
<link href="__PUBLIC__/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<script src="__PUBLIC__/hplus/js/plugins/layer/layer.min.js"></script>
<style type="text/css">
.zx11{
border: 1px;
border-color: red;
}
#signatureparent {
color:black;
background-color:darkgrey;
}
#signature {
border: 2px dotted black;
}
</style>
<div class="container">
<div id="signatureparent">
<div id="signature"></div>
</div>
<br>
<button type="button" class="btn btn-primary btn-block" id="save">保存</button>
<button type="button" class="btn btn-default btn-block" id="clear">清除</button>
</div>
<script>
$(document).ready(function () {
var arguments = {
width: '100%',
height: '300px',
cssclass: 'zx11',
signatureLine: false,//去除默认画布上那条横线
lineWidth: '5'
};
$("#signature").jSignature(arguments);
$('#clear').click(function () {
$("#signature").jSignature("reset");
});
$('#save').click(function () {
//标准格式但是base64会被tp框架过滤，所不校验，但是jSignature默认是使用png
var datapair = $("#signature").jSignature("getData", "image");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
i.image = datapair[1];
var requestTag;
requestTag = '{$Think.get.identify}';
console.log(i.image);
// console.log(i.src);
//询问框
layer.confirm("如果确认无误，请确认<br><img src=" + i.src + " height='100px' width='100px' />", {
btn: ['确认', '取消'] //按钮
}, function () {
$.ajax({
url: "/app.php?m={$Think.MODULE_NAME}&a={$Think.ACTION_NAME}",
//dataType: "json", contentType: "application/json; charset=utf-8",
data: "{\"identify\":\"" + requestTag + "\",\"image_data\":\"" + encodeURIComponent(i.image) + "\"}",//避免base64长度过大，json传输
type: "post",
cache: false,
success: function (msg) {
if (msg.code === 1) {
layer.msg('上传成功');
} else {
layer.msg('上传失败,请再次签名！');
}
}
});
}, function () {
layer.msg('取消成功');
});
});
});
</script>php部分 $image_data = json_decode(file_get_contents('php://input'), true); //只能这样接收 $data = rawurldecode($image_data['image_data']); $file_name = time().'.png'; //必须png $a = file_put_contents($file_name, base64_decode($data)); 【相关推荐：javascript学习教程、web前端】 |
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Comment utiliser le plug-in jSignature pour créer un bloc de signature et l'enregistrer sous forme d'image
- Résumez et partagez quelques interviews frontales basées sur jQuery (y compris les FAQ sur les terminaux mobiles)
- ThinkPhp5.1 + jSignature implémente la fonction de signature en ligne
- Comment parcourir en jQuery ? Une brève analyse de plusieurs méthodes de traversée
- Consultez ces questions d'entretien jQuery courantes pour vous aider à mieux comprendre les bases !