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

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

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

h5的Canvas自定义模板

![Center][]

页面代码:canvas前端代码:

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

js代码:

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

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

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

var canvas = document.getElementById("canvas");//canvas对象
    var dataURL = canvas.toDataURL("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" style="border: 1px solid #f8f8f8">' +
                   '<img src="'+data+'" style="width: 100%;height: 100%"/>'
                   '</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 = code.replace(' ','+');
          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/

[Center]: /images/20210503/1620037786530.png
[Center 1]: /images/20210503/1620037760738.png