使用canvas实现对图片的批量打码

最近有个需求,利用h5的canvas对图片一些涉及个人隐私的地方进行打码再上传,而且最好能实现批量打码.意思是在一张图片上对哪些地方做了打码,后续的所有图片都在同样的地方也可以自动打上码,不用人工一张一张进行图片涂抹了.

例如:

首先想到的是利用canvas的drawImage方法将图片加载进来,然后在利用鼠标的点击移动事件在画布上面划线,很容易就实现了这个功能.但是当载入其他图片的时候,之前画的线就全部消失了,因为canvas使用drawImage方法后会清空画布,所以这个方法只能对一张图片进行打码.

后来就琢磨能不能将图片和涂鸦分开,不放在一个canvas里面,将两个canvas重叠起来,大小一样,暂时设定为canvas1和canvas2,canvas1在底层,用于载入图片的容器,canvas2在上层,用于用户的涂抹层,当用户在canvas2上面进行涂抹的时候,因为canvas1和canvas2是完全重叠的,看起来就像是在图片上涂抹一样,涂抹完成之后,用户点击保存按钮时,将canvas2转化为image对象,然后使用canvas1的drawImage的方法将这个image对象加载近canvas1,于是canvas1就成了两个canvas的结合画面,然后在将canvas1转为image对象保存起来即可,因为现在canvas2的画布还没有被清空,此时我们只需要在canvas1载入另外一张图片,在点击保存又能对这张图片进行一模一样的打码工作了,后续只需要将所有需要打码的图片放入一个数组,利用for循环就能够实现批量图片打码的工作了.

但是此方法对于所有的图片的要求是大小必须一样,因为项目对于打码的图片大都是来自于手机截图,图片大小都是一样的,所以这个方法完全可以胜任此工作.

下面贴上源码

js代码

function Doodle() {
    this.mousePressed = false;//鼠标是否按下
    this.imgWidth = 300;
    this.imgHeight = "";
    this.lastX;
    this.lastY;
    this.cPushArray = [];//存储画布仓库
    this.cStep = -1;//当前步数
    this.c1;//  图片画布
    this.ctx1;//canvas对象1
    this.c2;//涂鸦画布
    this.ctx2;//canvas对象2
    this.importMuban = function(imgUrl) {//载入模板图片,以此图片的宽高比例来对后面所有的图片做预设.
        var self = this;
        var image = new Image();
        image.src = imgUrl;
        $(image).load(function () {
            self.imgHeight = (300/image.width)*image.height;
            self.c1.height = self.imgHeight;
            self.c2.height = self.imgHeight;
            $(".canvas-box").css({
                width: 300,
                height: self.imgHeight
            });
            self.ctx1.drawImage(image, 0, 0, self.imgWidth, self.imgHeight);
        });
    };
    this.importImg = function(imgUrl) {//载入其他图片
        var self = this;
        var image = new Image();
        image.src = imgUrl;
        $(image).load(function () {
            self.ctx1.drawImage(image, 0, 0, self.imgWidth, self.imgHeight);
        });
    };
    this.saveImg = function() {//保存图片
        var self = this;
        var newImg = this.c2.toDataURL("image/png");
        var Img = new Image();
        Img.src = newImg;
        $(Img).load(function (){
            self.ctx1.drawImage(Img, 0, 0, self.imgWidth, self.imgHeight);
            var img = self.c1.toDataURL("image/png");
            var ele = document.createElement("img");
            ele.src = img;
            document.body.appendChild(ele);
        });
    };
    this.clearCanvas = function () {//清空画布
        this.ctx2.clearRect(0,0,this.c1.width,this.c1.height);
    };
    this.Draw = function (x, y, isDown) {
        if (isDown) {
            this.ctx2.beginPath();
            this.ctx2.strokeStyle = $('#selColor').val();
            this.ctx2.lineWidth = $('#selWidth').val();
            this.ctx2.lineJoin = "round";
            this.ctx2.moveTo(this.lastX, this.lastY);
            this.ctx2.lineTo(x, y);
            this.ctx2.closePath();
            this.ctx2.stroke();
        }
        this.lastX = x;
        this.lastY = y;
    };
    this.cPush = function() {
        this.cStep++;
        if (this.cStep < this.cPushArray.length) { this.cPushArray.length = this.cStep; }
        this.cPushArray.push(document.getElementById('myCanvas2').toDataURL());
    };
    this.cUndo = function() {
        var self = this;
        if (self.cStep > 0) {
            self.cStep--;
            var canvasPic = new Image();
            canvasPic.src = self.cPushArray[self.cStep];
            canvasPic.onload = function () {
                console.log(self.cStep,self.cPushArray);
                self.ctx2.clearRect(0,0,self.c1.width,self.c1.height);
                self.ctx2.drawImage(canvasPic, 0, 0, self.imgWidth, self.imgHeight);
            }
        }
    };
    this.cRedo = function() {
        var self = this;
        if (self.cStep < self.cPushArray.length-1) {
            self.cStep++;
            var canvasPic = new Image();
            canvasPic.src = self.cPushArray[self.cStep];
            canvasPic.onload = function () {
                self.ctx2.clearRect(0,0,self.c1.width,self.c1.height);
                self.ctx2.drawImage(canvasPic, 0, 0, self.imgWidth, self.imgHeight);
            }
        }
    };
    this.initFn = function (cId1,cId2){
        var self = this;
        this.c1 = $(cId1)[0];
        this.c2 = $(cId2)[0];
        this.ctx1 = this.c1.getContext("2d");
        this.ctx2 = this.c2.getContext("2d");
        this.cPush();
        $(cId2).mousedown(function (e) {
            self.mousePressed = true;
            self.Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
            console.log("anxia")
        });
        $(cId2).mousemove(function (e) {
            if (self.mousePressed) {
                self.Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
            }
        });
        $(cId2).mouseup(function (e) {
            if (self.mousePressed) {
                self.mousePressed = false;
                self.cPush();
            }
        });
        $(cId2).mouseleave(function (e) {
            if (self.mousePressed) {
                self.mousePressed = false;
                self.cPush();
            }
        });
    }
}
$(function (){
    var aDoodle = new Doodle();
    aDoodle.initFn("#myCanvas1","#myCanvas2");
    $("#img1").click(function (){
        aDoodle.importMuban("img/1.jpg");
    });
    $("#img2").click(function (){
        aDoodle.importImg("img/2.jpg");
    });
    $("#img3").click(function (){
        aDoodle.importImg("img/3.jpg");
    });
    $("#img4").click(function (){
        aDoodle.importImg("img/4.jpg");
    });
    $("#img5").click(function (){
        aDoodle.importImg("img/5.jpg");
    });
    $("#undo").click(function (){
        aDoodle.cUndo();
    });
    $("#redo").click(function (){
        aDoodle.cRedo();
    });
    $("#clearDraw").click(function (){
        aDoodle.clearCanvas();
    });
    $("#saveImg").click(function (){
        aDoodle.saveImg();
    });
})

html代码:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/doodle.js"></script>
    <style type="text/css">
        select{color: #333;}
        .htmleaf-icon{color: #fff;}
        .canvas-box{
            width: 500px;
            height: 400px;
            margin: 0 auto;
            background-size: cover;
            background-repeat: no-repeat;
            border: 1px solid #ccc;
            position: relative;
        }
        #myCanvas1{
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #myCanvas2{
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 3;
        }
        .htmleaf-content{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="htmleaf-container">
        <div class="htmleaf-content bgcolor-3">
            <div align="center" id="bgImg" class="canvas-box">
                <canvas id="myCanvas1" width="300"></canvas>
                <canvas id="myCanvas2" width="300"></canvas>
            </div>
            <button class="btn btn-primary" id="clearDraw">清空画布</button>
            线条宽度 : <select id="selWidth">
            <option value="1">1</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="7">7</option>
            <option value="9" selected="selected">9</option>
            <option value="11">11</option>
        </select>
            线条颜色 : <select id="selColor">
            <option value="black">黑色</option>
            <option value="blue" selected="selected">蓝色</option>
            <option value="red">红色</option>
            <option value="green">绿色</option>
            <option value="yellow">黄色</option>
            <option value="gray">灰色</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-primary" id="undo">上一步</button>
            <button class="btn btn-danger" id="redo">下一步</button>
            <button id="saveImg" id="saveImg">保存图片</button>
        </div>
        <div style="text-align:center;">
            <button id="img1">载入模板图</button>
            <button id="img2">图片1</button>
            <button id="img3">图片2</button>
            <button id="img4">图片3</button>
            <button id="img5">图片4</button>
        </div>
    </div>
</body>
</html>

我在此方法的基础上又添加了改变线的像素和颜色的功能.