前言

最近做了个在移动端手写签名的需求，从github上搜了个插件就开始开搞。 插件地址

问题

这个插件最后会生成对应签名图片的base64,但是在页面上需要判断用户是否真正签名了。 因为一旦调用这个插件，就算用户没有触碰屏幕，插件也会对应的生成一个透明图片的base64。

思路

最后通过getImageData解决掉了。就是判断下 alpha 通道的值是否存在大于0的就可以判断用户有没有签名了。

主要代码

//受访者写字板
    $scope.getInterviewed = function () {
        var Interviewed = new Tablet("#HA-interviewed-container",{
            defaultColor: "#000000",
            otherHtml: $("#temp-interviewed").html(),
            onInit: function (){
                var that = this;
                var container = this.container;
                that.rotate(90);
                container.find('#HA-interviewed-submit').on("click", function (){
                    if(!that.isMobile){
                        //alert("请按f12打开控制台查看base64图片数据！");
                    }
                    $scope.autographInterviewed = that.getBase64();
                    /********************是否签名的判断-start********************/
                    var file = $scope.dataURLtoFile($scope.autographInterviewed, 'test');
                    var reader = new FileReader();
                    var img = new Image();
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    reader.readAsDataURL(file);
                    reader.onload = function(e) {
                        //e.target.result就是图片的base64地址信息
                        img.src = e.target.result;
                    };
                    img.onload = function() {
                        var img_width = 100;//this.width;
                        var img_height = 100;//this.height;
                        // 设置画布尺寸
                        canvas.width = img_width;
                        canvas.height = img_height;
                        // 将图片按像素写入画布
                        context.drawImage(this, 0, 0, img_width, img_height);
                        // 读取图片像素信息
                        var imageData = context.getImageData(0, 0, img_width, img_height);
                        var arr = imageData.data;
                        var brr = [];//结果值
                        for(var a=0;a<arr.length;a++){
                            var arrItem = arr[a];
                            if(arrItem !== 0){
                                brr.push(arrItem);
                            }
                        }
                        //说明签字了
                        if(brr.length > 0){
                            $scope.isInterviewed = true;
                            $('#pre-value-interviewed')
                                .css('background', 'url(' + $scope.autographInterviewed + ')')
                                .css('background-repeat', 'no-repeat')
                                .css('background-position', 'center center')
                                .css('background-size', 'contain');
                            $scope.submitEdit();
                        }else{
                            $scope.isInterviewed = false;
                            mui.toast('您未签名');
                            return false;
                        }
                    };
                    /********************是否签名的判断-end********************/
                });
                container.find('#HA-interviewed-back').on("click", function (){
                    $scope.isInterviewed = false;
                    $scope.backEdit();
                });
            }
        });
    };

---

效果

github地址