H5使⽤Canvas模板设计签名并将图⽚保存到本地
最近在⼯作中遇到⼀个需求,⾃定义签名并将签名返回到页⾯上，为了⽅便以后遇到这种请求不在到处资料，所以就想把这个需求记录下来
h5的Canvas⾃定义模板
页⾯代码:canvas前端代码:
<div id="div-tab-1" class="layui-tab-content" >
<div >
<a href="javascript:void(0)" οnclick="clearCanvas()" >清除</a>
</div>
<canvas  width="1000" height="270" id="canvas">
<span>亲，您的浏览器不⽀持canvas，换个浏览器试试吧！</span>
</canvas>
<div >绘制签名</div>
</div>
js代码:
var canvas = ElementById("canvas");
var ctx = Context("2d");
var maindiv = ElementById("maindiv");
ctx.lineWidth = 6.0;
draw();
function draw(){
var ev = ev || event;
ctx.beginPath();//canvas.offsetLeft-maindiv.offsetLeft 这个距离才是canvas距离左侧的真正距离
var ev = ev || event;
ctx.lineTo(ev.clientX - canvas.offsetLeft-maindiv.offsetLeft, ev.clientY - canvas.offsetTop);
ctx.stroke();
}
ctx.closePath();
}
}
}
}
这样就可以达到⼀个⾃定义的画板,
h5免费模板下载我们可以在上⾯拖动⿏标写任意东西，然后可以通过代码将画板上的内容以图⽚的形式保存到本地
实际上我们在画板上画的图我们要想得到,canvas提供了api给我们使⽤，直接可以得到图⽚base64编码，我们把base64编码传到后台，通过转换就可以到得到我们想要的图⽚啦.
var canvas = ElementById("canvas");//canvas对象
var dataURL = DataURL("image/png");
dataURL就是通过api得到的base64编码
得到的格式如:
data:image/png;base64,xxxxxx
我们在转图⽚的时候就⼀定要把前缀
data:image/png;base64,(注意这有个逗号)
去掉；我们可以通过这个⽅法把前缀去掉
var imageDateB64 = dataURL.substring(22);
还有在url传递过程中会发⽣转义(+号会⾃动转换成空格，所以在后台的时候要把空格替换成+号，才能正确的转换图⽚)
如果base64转图⽚得到⼀张空⽩的图⽚，那就是没有进⾏转义
$.ajax({
url:'/index/topic',
type:'post',
data:'code='+imageDateB64,
success:function (data) {
var doc =
'<div class="layui-inline" >' +
'<img src="'+data+'" />'
'</div>';
$("#mysign").append(doc);
}
})
后台代码:
public static boolean GenerateImage(String imgStr, String imgFilePath) {// 对字节数组字符串进⾏Base64解码并⽣成图⽚if (imgStr == null) // 图像数据为空
return false;
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解码
byte[] bytes = decoder.decodeBuffer(imgStr);
for (int i = 0; i < bytes.length; ++i) {
if (bytes[i] < 0) {// 调整异常数据
bytes[i] += 256;
}
}
// ⽣成jpeg图⽚
OutputStream out = new FileOutputStream(imgFilePath);
out.write(bytes);
out.flush();
out.close();
return true;
} catch (Exception e) {
return false;
}
}
@PostMapping("/topic")
@ResponseBody
public String canves2pic(String code) {
code = place(' ','+');
String imgname ="/img/"+new Random().nextInt(999999)+".png";
testpic.GenerateImage(code,"D:/Demo/barcodetest/barcode/src/main/resources/static/"+imgname);    return imgname;
}
这样图⽚转换成功后就会放到我们给的路径下⾯:
D:/Demo/barcodetest/barcode/src/main/resources/static/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。