做网站全程指导wordpress免费资源模板
news/
2025/10/8 14:25:09/
文章来源:
做网站全程指导,wordpress免费资源模板,惠州网站建设如何,项城做网站jSignature签名的用法1、先看看效果以后最后它是什么格式的2、先去下载该js3、下载以后就把它引入我们的HTML中4、看一下我的例子吧#xff01;下期我们在讲#xff0c;怎么把base64在后台处理#xff0c;然后在存进我们指定的位置#xff0c;以及怎么存数据库#xff1b;…
jSignature签名的用法1、先看看效果以后最后它是什么格式的2、先去下载该js3、下载以后就把它引入我们的HTML中4、看一下我的例子吧下期我们在讲怎么把base64在后台处理然后在存进我们指定的位置以及怎么存数据库1、先看看效果以后最后它是什么格式的
注意 1这个插件最后导出的是base64 的格式到后台需要我们自行处理。 2这个插件通过后台处理以后生成的图片是透明底黑字如果用谷歌浏览器打开就是一团漆黑啥都看不到但是用windows的照片查看器看是正常的。 3你们最后用我的演示代码是没有按钮样式的因为我用了ui美化。
首先只有一个签名标题按钮 点击签名 点击重写 就可以清空我们写的 点击关闭就回到只有签名按钮的页面 点击确定就很输出base64格式的数据以及会显示刚刚你写的照片 让我们输出一下可以看到最后他的格式
2、先去下载该js
好像CSDN不能再博客中放文件所以大家只好自己去下载咯。 这个就是jq插件库中的jSignature
3、下载以后就把它引入我们的HTML中
4、看一下我的例子吧
js代码
$(#write).click(function() {$(#writers).show(); /$(#writers).append(div idsignature stylebackground-color: #d2d2e8;/div);//追加一个div这个div就是我们签名的div$(#signature).jSignature();//初始化插件$(#write).hide();});//重置画布清楚笔记
$(#reset).click(function(){$(#signature).jSignature(reset); //重置画布可以进行重新作画$(#images).attr(src,);
});//点击关闭按钮让签名div隐藏签名按钮显示出来
$(#close).click(function(){$(#signature).remove();$(#writers).hide();$(#write).show();
});//点击确定按钮,把签名的转成图片,然后把数据放进图片中,最后把图片中的数据传到后台
$(#yes).click(function(){//将画布内容转换为图片var $signature $(#signature)var datapair $signature.jSignature(getData, image);$(#images).attr(src,data: datapair[0] , datapair[1]);var src_data $(#images).attr(src);//拿到图片中的src这就是我们需要的base64console.info(src_data);//在这里就写我们的后台操作http({data: {encode:src_data,projectId:projectId,institutionsId:institutionsId},url: projectFile/save,type: post,dataType: json,success: function(data) {}})});html代码
button typebutton classmui-btn mui-btn-success idwrite签名/button
div idwriters styledisplay: none;button typebutton idreset stylemargin: 10px 5px;重写/buttonbutton typebutton idclose stylemargin: 10px 5px;关闭/buttonbutton typebutton idyes stylemargin: 10px 5px;确认/buttondiv idsomeelement img src idimages/div
/div下期我们在讲怎么把base64在后台处理然后在存进我们指定的位置以及怎么存数据库
下期jSignature签名的用法一文教会你二后台代码
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/931600.shtml
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!