美文网首页
判断canvas上是否有绘制内容

判断canvas上是否有绘制内容

作者: vivianXIa | 来源:发表于2019-11-28 15:06 被阅读0次

    情境:在提交的时候需要判断用户是否在canvas上绘制内容

    方法一
    判断图层通道,但是在ie或者360兼容模式下,会报some属性或者方法不支持的问题,没有找到比较好的修改方法。可以用在手机端

    //returns true if all color channels in each pixel are 0 (or "blank")
    function isCanvasBlank(canvas) {
        return !canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data.some(function(channel){return channel !==0;})
    }
    

    方法二
    png算法 这个方法去判断兼容性比较好,pc端推荐该方法。

    //判断canvas是否绘制签名
        function isCanvasBlank(canvas) {
            //PNG 算法
            var blank = document.createElement('canvas');
            blank.width = canvas.width;
            blank.height = canvas.height;
            return canvas.toDataURL() == blank.toDataURL();
        }
    

    相关文章

      网友评论

          本文标题:判断canvas上是否有绘制内容

          本文链接:https://www.haomeiwen.com/subject/dejbwctx.html