美文网首页
判断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上是否有绘制内容

    情境:在提交的时候需要判断用户是否在canvas上绘制内容 方法一判断图层通道,但是在ie或者360兼容模式下,会...

  • 判断是否支持canvas

    创建canvas 方法一 判断dom上getContext方法是否存在 方法二 创建一个专门用于判断Canvas是...

  • Android自定义View onDraw详解

    onDraw的作用:绘制控件的内容 绘制的核心:Canvas(画布)、Paint(画笔) Canvas Canva...

  • canvas的isPointInPath(x,y)

    canvas的isPointInPath(x,y)判断某一点(x,y)是否在绘制图形之内。填充很试用哦。代码效果,...

  • Canvas实现文字粒子效果

    最终实现效果 实现思路: 获取到canvas绘制后屏幕上像素点的数组,在目标像素点上绘制粒子替换掉原来的内容 绘制...

  • Android自定义View之draw系方法

    Canvas是Android绘制的基础,onDraw方法提供Canvas类来帮助开发者绘制内容,为了加强自己的印象...

  • 自定义绘制流程

    自定义绘制牵扯到 以下几点内容: 1.canvas.drawXXX 绘制出不同的内容 例如 drawText绘制文...

  • 自定义View(一)Paint

    1 颜色 Canvas绘制的内容,有三层对颜色的处理: 1.1 基本颜色 像素的基本颜色,根据绘制内容的不同而有不...

  • HTML5 - Canvas

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 Canvas 绘制图像 在使用 ...

  • 纯JS实现五子棋游戏,兼容各浏览器(附源码)

    棋盘的画法:canvas绘制直线、设置画笔颜色 棋子的画法:canvas画圆、填充渐变色 判断计算机落子,可先遍...

网友评论

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

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