941477276 / Tablet

canvas在线签名板
37 stars 19 forks source link

建议增加判断图片是否有内容,通过判断颜色的数量进行 #6

Closed gdx1231 closed 2 years ago

gdx1231 commented 2 years ago

`

tablet.getImageData = function() {   | let data = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);   | return data.data;   | }; tablet.getImageColors = function() {   | // 获取像素数据   | let data = this.getImageData();   | function toHex(a){   | let hex = a.toString(16);   | if(hex.length == 1){   | return "0"+hex;   | } else {   | return hex;   | }   | };   | function toColor(r,g,b,a){   | let s = [];   | s.push(toHex(r));   | s.push(toHex(g));   | s.push(toHex(b));   | s.push(toHex(a));   | return s.join('');   | }   | let map={};   | for (let i = 0; i < data.length; i += 4) {   | let r = data[i];   | let g = data[i+1];   | let b = data[i+2];   | let a = data[i+3];   | let c = toColor(r,g,b,a);   | if(map[c]){   | map[c]++;   | } else {   | map[c]=1;   | }   | }   | return map;   | };

`

941477276 commented 2 years ago

实例的hasCanUseLine方法可以判断是否有内容,增加通过颜色数量进行判断的原因是什么呢?

gdx1231 commented 2 years ago

当用户的签名保存为图片A,再次打开页面,图片A作为签名的背景图,当用户没有任何操作时,不会有线条记录。因此当再次提交数据时,会错误判断签名无内容。

941477276 commented 2 years ago

怎么根据getImageColors函数返回map去判断是否有内容呢? 当画布上什么都没有的时候map的值为:{00000000: 596500},当有内容时map里有很多内容

941477276 commented 2 years ago

已增加hasContent方法用于判断是否有内容

gdx1231 commented 2 years ago

:)