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

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

h5的Canvas自定义模板

页面代码: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代码:

window.onload = function(){var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var maindiv = document.getElementById("maindiv");
    ctx.lineWidth = 6.0;
    draw();
    function draw(){document.onmousedown = function(ev){var ev = ev || event;
            ctx.beginPath();//canvas.offsetLeft-maindiv.offsetLeft 这个距离才是canvas距离左侧的真正距离
            ctx.moveTo(ev.clientX - canvas.offsetLeft-maindiv.offsetLeft, ev.clientY - canvas.offsetTop);
            document.onmousemove = function (ev) {var ev = ev || event;
                ctx.lineTo(ev.clientX - canvas.offsetLeft-maindiv.offsetLeft, ev.clientY - canvas.offsetTop);
                ctx.stroke();
            }document.onmouseup = function (ev) {document.onmousemove = document.onmouseup = null;
                ctx.closePath();
            }}}}

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

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

实际上我们在画板上画的图我们要想得到,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/

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

php织梦模板上传,织梦模板让模型里的图片字段支持本地上传的办法
function SeePicNew(f, imgdid, frname, hpos, acname, formname, picname, picvalue) { var formname = fo ...
h5 vue利用canvas实现手机签名并且可旋转功能
功能描述: 利用canvas实现手机签名转化成图片( 包含清除,由于手机全屏展示所以还添加了图片翻转功能)生成base64地址上传后台功能展示: 代码展示: html: <template ...
html 手写签名撤销,[转]H5 canvas手写签名
手写签名 html,body{ margin: 0; padding: 0; } .saveimg{ text-align: center; } .saveimgs span{ display: in ...
h5邮件的邮箱支持_Coremail发布H5邮箱移动模板新版本，多项新功能让办公更便捷...
近日,Coremail论客发布了邮箱客户端H5邮箱移动模板新版本Hxphone4.1.2,据Coremail产品经理介绍:此次更新的版本不仅对原有的协同模块功能.安全模块功能进行了更新完善,在收发信的 ...
html5快速开发模板生成器,推荐一个基于Vue 的 H5 快速开发模板
本项目以基于 vue-cli4 和 Vant-ui 搭建的,进行移动端开发中的一些最佳实践方案模板地址动动你的小手点颗star 样式适配在移动端网页开发时,样式适配始终是一个绕不开的问题.对此目 ...
微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
一.简介在微信小程序开发中,有时候需要手写签名生成图片上传服务器.制作一个手绘板.画板并支持保存图片等,然后就封装了一下:DZMDrawingBoard. DZMDrawingBoard 通过 Ca ...
利用 Tkinter 打造专属图形化界面：设计签名
大家好,今天本期带着大家制作一个属于自己的GUI图形化界面:用于设计签名的哦(效果如下图),是不是感觉很好玩,是不是很想学习呢? 限于篇幅,今天我们首先详细讲述一下Tkinter的使用方法.本来不准备 ...
前端canvas手写签名
最近遇到一个需求,签合同的时候在移动端上客户要手写签名,然后把签名生成的图片传给后端,技术栈react 步骤一:基础实现代码如下技术点大致解析: 1. document.querySelector( ...
本周推荐10款免费的网站模板设计
为什么80%的码农都做不了架构师?>>> 日期:2013-5-10 来源:GBin1.com 免费网站模板相信大家肯定都非常喜欢,在今天这篇文章中,我们收集了来自极客标签社区 ...

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

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

最新文章

热门文章