H5使用Canvas模板设计签名并将图片保存到本地

小灰灰 2021-05-03 10:30 779阅读 0赞

最近在工作中遇到一个需求,自定义签名并将签名返回到页面上,为了方便以后遇到这种请求不在到处找资料,所以就想把这个需求记录下来

h5的Canvas自定义模板

Center

页面代码:canvas前端代码:

  1. <div id="div-tab-1" class="layui-tab-content" style="background-color: #f8f8f8;margin-top: 10px;height: 330px;text-align: center">
  2.     <div style="text-align: right;">
  3.         <a href="javascript:void(0)" οnclick="clearCanvas()" style="color: blue;margin-right: 30px;">清除</a>
  4.     </div>
  5.         <canvas  width="1000" height="270" id="canvas">
  6.             <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
  7.         </canvas>
  8.     <div style="text-align: center;font-size: 20px;padding: 10px;border: 1px dashed #f0ad4e">绘制签名</div>
  9. </div>

js代码:

  1. window.onload = function(){
  2.     var canvas = document.getElementById("canvas");
  3.     var ctx = canvas.getContext("2d");
  4.     var maindiv = document.getElementById("maindiv");
  5.     ctx.lineWidth = 6.0;
  6.     draw();
  7.     function draw(){
  8.         document.onmousedown = function(ev){
  9.             var ev = ev || event;
  10.             ctx.beginPath();//canvas.offsetLeft-maindiv.offsetLeft 这个距离才是canvas距离左侧的真正距离
  11.             ctx.moveTo(ev.clientX - canvas.offsetLeft-maindiv.offsetLeft, ev.clientY - canvas.offsetTop);
  12.             document.onmousemove = function (ev) {
  13.                 var ev = ev || event;
  14.                 ctx.lineTo(ev.clientX - canvas.offsetLeft-maindiv.offsetLeft, ev.clientY - canvas.offsetTop);
  15.                 ctx.stroke();
  16.             }
  17.             document.onmouseup = function (ev) {
  18.                 document.onmousemove = document.onmouseup = null;
  19.                 ctx.closePath();
  20.             }
  22.         }
  23.     }
  25. }

这样就可以达到一个自定义的画板,

我们可以在上面拖动鼠标写任意东西,然后可以通过代码将画板上的内容以图片的形式保存到本地Center 1

实际上我们在画板上画的图我们要想得到,canvas提供了api给我们使用,直接可以得到图片base64编码,我们把base64编码传到后台,通过转换就可以到得到我们想要的图片啦.

  1. var canvas = document.getElementById("canvas");//canvas对象
  2. var dataURL = canvas.toDataURL("image/png");

dataURL就是通过api得到的base64编码

得到的格式如:

  1. data:image/png;base64,xxxxxx

我们在转图片的时候就一定要把前缀 data:image/png;base64,(注意这有个逗号)去掉;我们可以通过这个方法把前缀去掉

var imageDateB64 = dataURL.substring(22);

还有在url传递过程中会发生转义(+号会自动转换成空格,所以在后台的时候要把空格替换成+号,才能正确的转换图片)

如果base64转图片得到一张空白的图片,那就是没有进行转义

  1. $.ajax({
  2.     url:'/index/topic',
  3.     type:'post',
  4.     data:'code='+imageDateB64,
  5.     success:function (data) {
  6.            var doc =
  7.                '<div class="layui-inline" style="border: 1px solid #f8f8f8">' +
  8.                '<img src="'+data+'" style="width: 100%;height: 100%"/>'
  9.                '</div>';
  10.                $("#mysign").append(doc);
  11.     }
  12. })

后台代码:

  1. public static boolean GenerateImage(String imgStr, String imgFilePath) {
  2.    // 对字节数组字符串进行Base64解码并生成图片
  3.     if (imgStr == null) // 图像数据为空
  4.         return false;
  5.     BASE64Decoder decoder = new BASE64Decoder();
  6.     try {
  7.         // Base64解码
  8.         byte[] bytes = decoder.decodeBuffer(imgStr);
  9.         for (int i = 0; i < bytes.length; ++i) {
  10.             if (bytes[i] < 0) {
  11.    // 调整异常数据
  12.                 bytes[i] += 256;
  13.             }
  14.         }
  15.         // 生成jpeg图片
  16.         OutputStream out = new FileOutputStream(imgFilePath);
  17.         out.write(bytes);
  18.         out.flush();
  19.         out.close();
  20.         return true;
  21.     } catch (Exception e) {
  22.         return false;
  23.     }
  24. }
  26. @PostMapping("/topic")
  27. @ResponseBody
  28. public String canves2pic(String code) {
  29.       code = code.replace(' ','+');
  30.       String imgname ="/img/"+new Random().nextInt(999999)+".png";
  31.     testpic.GenerateImage(code,"D:/Demo/barcodetest/barcode/src/main/resources/static/"+imgname);
  32.     return imgname;
  33. }

这样图片转换成功后就会放到我们给的路径下面:

  1. D:/Demo/barcodetest/barcode/src/main/resources/static/

发表评论

表情：
评论列表 （有 0 条评论，779人围观）

还没有评论，来说两句吧...

相关阅读