站长工具中文精品,wordpress添加邀请码,制作网页的流程,网易企业邮箱的登录方法一、效果图 注意#xff1a;1、CSS样式自己调#xff0c;这里写的很简陋。 2、单击下载#xff0c;并不是下载图片#xff0c;而是保存到后台。 3、注意js的引用。
二、前端
!DOCTYPE html
html langzh-CN
head…一、效果图 注意1、CSS样式自己调这里写的很简陋。 2、单击下载并不是下载图片而是保存到后台。 3、注意js的引用。
二、前端
!DOCTYPE html
html langzh-CN
headtitle手写板签名demo/titlemeta http-equivX-UA-Compatible contentIEedge,chrome1 /meta charsetUTF-8meta namedescription contentoverview stats /meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0 /script src./js/jquery-2.0.3/jquery-2.0.3.min.js/scriptscript src./js/jSignature/jSignature.min.js/scriptscript$(function() {var $sigdiv $(#signature);$sigdiv.jSignature(); // 初始化jSignature插件-属性用,隔开// $sigdiv.jSignature({decor-color:red}); // 初始化jSignature插件-设置横线颜色// $sigdiv.jSignature({lineWidth:6});// 初始化jSignature插件-设置横线粗细// $sigdiv.jSignature({decor-color:transparent});// 初始化jSignature插件-去掉横线// $sigdiv.jSignature({UndoButton:true});// 初始化jSignature插件-撤销功能// $sigdiv.jSignature({height: 100, width: 200}); // 初始化jSignature插件-设置书写范围(大小)$(#yes).click(function(){//将画布内容转换为图片var datapair $sigdiv.jSignature(getData, image);$(#images).attr(src,data: datapair[0] , datapair[1]);});$(#download).click(function(){var src_data $(#images).attr(src);// console.log(src);if(src_data){$.ajax({type:post,url:./base64.php,data:{src_data:src_data},async:false,success:function(data){// console.log(data);if(data){alert(data);// alert(生成签名成功);}else{alert(生成失败);}}});}else{alert(图片不能为空);return false;}});$(#reset).click(function(){$(#signature).jSignature(reset); //重置画布可以进行重新作画$(#images).attr(src,);});});/script
/head
bodydiv idsignature/divp styletext-align: centerb stylecolor: red请按着鼠标写字签名。/b/pinput typebutton value保存 idyes/input typebutton value下载 iddownload/input typebutton value重写 idreset/div idsomeelementimg src idimages/div
/body
/html三、后台
?php
/* base64格式编码转换为图片并保存对应文件夹 */
$base64_content $_POST[src_data];
// echo $base64_content;die;//截取数据为数组
$base64_content explode(,,$base64_content); //生成目录demo所在根目录下
// $new_file ./.date(Ymd,time())./;
$new_file date(Ymd,time())./;
if(!file_exists($new_file)){ //检查是否有该文件夹如果没有就创建并给予最高权限 mkdir($new_file, 0700);
}//文件后缀名
$type png;
//生成文件名相对路径
$new_file $new_file.time()..$type;//转换为图片文件
if (file_put_contents($new_file,base64_decode($base64_content[1]))){echo $new_file;
}else{ return false;
} ?四、下载手写签名图片
1、前端代码
$.ajax({type:post,url:./base64.php,data:{src_data:src_data},async:false,dataType:json,success:function(data){if(data){//跳转下载链接window.location.href data.url;// alert(生成签名成功);}else{alert(生成失败);}}
});2、后台base64.php代码
?php
header(Content-Type:text/html,charsetutf-8);
/* base64格式编码转换为图片并保存对应文件夹 */
$base64_content $_POST[src_data];
// echo $base64_content;die;//截取数据为数组
$base64_content explode(,,$base64_content); //生成目录demo所在根目录下
// $new_file ./.date(Ymd,time())./;
$new_file date(Ymd,time())./;
if(!file_exists($new_file)){ //检查是否有该文件夹如果没有就创建并给予最高权限 mkdir($new_file, 0700);
}//文件后缀名
$type png;
//生成文件名相对路径
$new_file $new_file.time()..$type;//转换为图片文件并返回图片链接
if (file_put_contents($new_file,base64_decode($base64_content[1]))){$url $_SERVER[HTTP_REFERER]./download.php?url.$new_file;$result[url] $url;$result[status] 1;echo json_encode($result);die;
}else{$result[status] 0;echo json_encode($result);die;
} 3、后台download.php代码
?phpheader(Content-Type:text/html,charsetutf-8);//下面是输出下载;// ob_end_clean();//清除缓存以免乱码出现// echo 1111;die;$new_file $_GET[url];// var_dump($new_file);die;header ( Cache-Control: max-age0 );header ( Content-Description: File Transfer );header ( Content-disposition: attachment; filename.basename($new_file)); //文件名header ( Content-Type: application/png ); //文件格式:pngheader ( Content-Transfer-Encoding: binary ); // 告诉浏览器这是二进制文件header ( Content-Length: . filesize ( $new_file ) ); //告诉浏览器,文件大小readfile ( $new_file );//输出文件;
?
