signature-h5使用

最新推荐文章于 2025-03-04 16:10:43 发布

流浪大叔

最新推荐文章于 2025-03-04 16:10:43 发布

阅读量668

点赞数

分类专栏：前端 js 组件文章标签： h5 签名

本文链接：https://blog.youkuaiyun.com/qq_36311091/article/details/79932583

版权

前端同时被 3 个专栏收录

30 篇文章

订阅专栏

17 篇文章

订阅专栏

组件

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5签名</title>
    <style>
        #signature, #someElement {
            border: 1px solid rgb(204, 204, 204);
        }
    </style>

</head>
<body>
<!--settings = {-->
<!--'width' : 'ratio'     定义画布的宽度。数值没有%或px-->
<!--,'height' : 'ratio'   定义画布的高度。数值没有%或px-->
<!--,'sizeRatio': 4 // only used when height = 'ratio'-->
<!--,'color' : '#000'      定义了中风在画布上的颜色。接受任何颜色的十六进制值-->
<!--,'background-color': '#fff'   定义了画布的背景颜色。接受任何颜色的十六进制值。-->
<!--,'decor-color': '#eee'-->
<!--,'lineWidth' : 0       定义的厚度。接受任何积极的数值-->
<!--,'minFatFingerCompensation' : -10-->
<!--,'showUndoButton': false-->
<!--,'readOnly': false-->
<!--,'data': []-->
<!--,'signatureLine': false-->
<!--}-->
<div id="signature"></div>
<button οnclick="doUpSignature()">导出签名</button>
<button οnclick="doDownLoadSignature()">下载签名</button>
<button οnclick="clearSignature()">清除画布</button>
<button οnclick="doResetSignature()">重置画布</button>
<button οnclick="doSetSignature()">重新导入画布</button>
<div id="someElement">

</div>

<script src="../../jSignature-master/libs/jquery.js"></script>
<!--[if lt IE 9]>
<script src="../../jSignature-master/libs/flashcanvas.js"></script>
<![endif]-->
<script src="../../jSignature-master/libs/jSignature.min.js"></script>
<script>
    var base30;
    /*横竖屏改变时，画布会重新初始化*/
    $(document).ready(function () {
        $("#signature").jSignature();
        /*初始化画布*/
    });
    /*重置画布  */
    function doResetSignature() {
        $("#signature").jSignature("reset");
    }
    //清除画布并重新渲染
    function clearSignature() {
        $("#signature").jSignature("clear");
    }
    /*导出签名制成图片*/
    function doUpSignature() {
        var signature = $("#signature");
        // 获取签名的SVG和呈现在浏览器中的SVG.
        var dataPair = signature.jSignature("getData", "image");
        //此导出插件返回数组[MIMETYPE，签名的SVG的base64编码字符串划]
        /*var dataPair = signature.jSignature("getData", "svgbase64");*/
        console.log(dataPair);
        // 获取签名的“base30”数据对
        base30 = signature.jSignature("getData", "base30");
        var array = dataPair.splice(",");
        var i = new Image();
        i.src = "data:" + array[0] + "," + array[1];
        $(i).appendTo($("#someElement"));// 添加图像（SVG），到 DOM
    }
    /*重新导入签名*/
    function doSetSignature() {
        var imgList = $("#someElement").find("img");
        if (imgList.length > 0) {
            console.log(imgList[0].src);
            var svgBaseData = imgList[0].src.split(",");
            console.log(svgBaseData);
            //重新导入数据到jSignature。
            $("#signature").jSignature("setData", "data:" + base30.join(","));
        }
    }

    /*下载图片*/
    function doDownLoadSignature() {
        downloadFile("a.png", $("img").attr("src"));
    }
    function downloadFile(fileName, content) {
        var aLink = document.createElement('a');
        var blob = base64ToBlob(content); //new Blob([content]);
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.click();
        aLink.dispatchEvent(evt);
    }
    //base64转blob
    function base64ToBlob(code) {
        var parts = code.split(';base64,');
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;

        var uInt8Array = new Uint8Array(rawLength);

        for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
    }
    /**
     * 将以base64的图片url数据转换为Blob
     * @param urlData
     *            用url方式表示的base64图片数据
     */
    function convertBase64UrlToBlob(urlData) {
        var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
        //处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {type: 'image/png'});
    }
</script>
</body>
</html>