Fatal编程技术网
  • html/
  • 在html5画布上绘制图像而不删除它

在html5画布上绘制图像而不删除它

html canvas

在html5画布上绘制图像而不删除它,html,canvas,paint,tint,Html,Canvas,Paint,Tint,我有一个黑白图像，我想用我选择的颜色绘制它，而不删除图像。当我开始画它的时候，图像的边界也是 我希望仍然有图像在那里，只画一个PNG图像的“背景”，就像这个脚本：“ var isFirefox=typeof InstallTrigger！='未定义'； var CanvasLogBook=函数（）{ 该指数=0； this.logs=[]； 这是logDrawing（）； }; CanvasLogBook.prototype.sliceAndPush=函数（imageObject）{ 变量数组

我有一个黑白图像，我想用我选择的颜色绘制它，而不删除图像。当我开始画它的时候，图像的边界也是

我希望仍然有图像在那里，只画一个PNG图像的“背景”，就像这个脚本：“


var isFirefox=typeof InstallTrigger！='未定义'；
var CanvasLogBook=函数（）{
该指数=0；
this.logs=[]；
这是logDrawing（）；
};
CanvasLogBook.prototype.sliceAndPush=函数（imageObject）{
变量数组；
if（this.index==this.logs.length-1）{
this.logs.push（imageObject）；
array=this.logs；
}否则{
var tempArray=this.logs.slice（0，this.index+1）；
tempArray.push（imageObject）；
数组=临时数组；
}
如果（array.length>1）{
这个.index++；
}
返回数组；
};
CanvasLogBook.prototype.logDrawing=function（）{
如果（iFirefox）{
var image=新图像（）；
image.src=document.getElementById（'can'）.toDataURL（）；
//var canvas=document.getElementsByClassName（“can”）；
//image.src=canvas.toDataURL（）；
this.logs=this.sliceAndPush（图像）；
}否则{
var imageData=document.getElementById（'can'）.toDataURL（）；
this.logs=this.sliceAndPush（imageData）；
}
};
CanvasLogBook.prototype.undo=函数（）{
ctx.clearRect（0,0，$（'can'）.width（），$（'can'）.height（））；
如果（this.index>0）{
本索引--；
this.showLogAtIndex（this.index）；
}
};
CanvasLogBook.prototype.redo=函数（）{
if（this.index<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>

<!--http://perfectionkills.com/exploring-canvas-drawing-techniques/-->
<script type="text/javascript">


var isFirefox = typeof InstallTrigger !== 'undefined';

var CanvasLogBook = function() {
    this.index = 0;
    this.logs = [];
    this.logDrawing();
};
CanvasLogBook.prototype.sliceAndPush = function(imageObject) {
    var array;
    if (this.index == this.logs.length-1) {
        this.logs.push(imageObject);
        array = this.logs;
    } else {
        var tempArray = this.logs.slice(0, this.index+1);
        tempArray.push(imageObject);
        array = tempArray;
    }
    if (array.length > 1) {
        this.index++;
    }
    return array;
};
CanvasLogBook.prototype.logDrawing = function() { 
    if (isFirefox) {
        var image = new Image();

        image.src = document.getElementById('can').toDataURL();
        //var canvas = document.getElementsByClassName("can");
        //image.src = canvas.toDataURL();

        this.logs = this.sliceAndPush(image);
    } else {
        var imageData = document.getElementById('can').toDataURL();
        this.logs = this.sliceAndPush(imageData);
    }
};
CanvasLogBook.prototype.undo = function() {
    ctx.clearRect(0, 0, $('#can').width(), $('#can').height());
    if (this.index > 0) {
        this.index--;
        this.showLogAtIndex(this.index);
    }
};
CanvasLogBook.prototype.redo = function() {
    if (this.index < this.logs.length-1) {
        ctx.clearRect(0, 0, $('#can').width(), $('#can').height());
        this.index++;
        this.showLogAtIndex(this.index);
    }
};
CanvasLogBook.prototype.showLogAtIndex = function(index) {
    ctx.clearRect(0, 0, $('#can').width(), $('#can').height());
    if (isFirefox) {
        var image = this.logs[index];
        ctx.drawImage(image, 0, 0);
    } else {
        var image = new Image();
        image.src = this.logs[index];
        ctx.drawImage(image, 0, 0);
    }
};




$( document ).ready(function() {

    var canvasLogBook = new CanvasLogBook();

    $( "#undo" ).click(function() {
        canvasLogBook.undo();
    });

    $( "#redo" ).click(function() {
        canvasLogBook.redo();
    });


    $( "canvas" ).click(function() {
        canvasLogBook.logDrawing();
    }); 

}); 




var img = document.createElement("img");        // Create a <button> element
img.setAttribute('src','img.png');

var canvas, ctx, flag = false,
    prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    dot_flag = false;

var x = "black",
    y = 10;

function init() {
    canvas = document.getElementById('can');
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;


   canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);


    ctx.drawImage(img,90, 20); //desenho a img no começo


}

function color(obj) {


    var cor_sombra_selecionado = $('input[name=sombra]:checked').val();
    if ( (cor_sombra_selecionado == '') || (cor_sombra_selecionado =='nenhuma') ){
        ctx.shadowColor = obj.id;
    } else {
        ctx.shadowColor = cor_sombra_selecionado;
    }


    switch (obj.id) {
        case "green":
            x = "green";
            break;
        case "blue":
            x = "blue";
            break;
        case "red":
            x = "red";
            break;
        case "yellow":
            x = "yellow";
            break;
        case "orange":
            x = "orange";
            break;
        case "black":
            x = "black";
            break;
        case "white":
            x = "white";
            break;
    }
    if (x == "white") y = 10;
    else y = 10;

}

function sombra_funcao(cor) {

    var cor_sombra_selecionado = $('input[name=sombra]:checked').val();
    console.log(cor_sombra_selecionado + ' cliquei na cor da sombra');
    if ( (cor_sombra_selecionado == '') || (cor_sombra_selecionado =='nenhuma') ){
        ctx.shadowColor = x;
    } else {
        ctx.shadowColor = cor_sombra_selecionado;
    }



}

function draw() {

    var cor_sombra_selecionado = $('input[type=radio]:checked').val();
    console.log(cor_sombra_selecionado + ' cliquei na cor');
    if ( (cor_sombra_selecionado == '') || (cor_sombra_selecionado =='nenhuma') ){
        ctx.shadowColor = x;
    } else {
        ctx.shadowColor = cor_sombra_selecionado;
    }


    ctx.beginPath();
    ctx.lineCap = "round";
    ctx.lineJoin    = 'round';
    ctx.shadowBlur = 4;


    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();

    console.log("dsa");
    ctx.closePath();
}

function erase() {
    var m = confirm("Want to clear");
    if (m) {
        ctx.clearRect(0, 0, w, h);
        document.getElementById("canvasimg").style.display = "none";
    }
    ctx.drawImage(img,90, 20); //desenho o bg
}

function save() {

    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

function findxy(res, e) {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.strokeStyle = x;

            ctx.beginPath();
            ctx.fillStyle = x;
            //ctx.fillRect(currX, currY, 10, 10,10,10);
            ctx.arc(currX, currY,4,0,2*Math.PI);
            //ctx.arc(currX, currY,2,2,2,2*Math.PI);
            ctx.lineCap = "round";
            ctx.lineJoin = 'round';
            //ctx.stroke();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            draw();
        }
    }
}

/*$( document ).ready(function() {

(function($) {
  var tool;


  var history = {
    redo_list: [],
    undo_list: [],
    saveState: function(canvas, list, keep_redo) {
      keep_redo = keep_redo || false;
      if(!keep_redo) {
        this.redo_list = [];
      }

      (list || this.undo_list).push(canvas.toDataURL());   
    },
    undo: function(canvas, ctx) {
      this.restoreState(canvas, ctx, this.undo_list, this.redo_list);
    },
    redo: function(canvas, ctx) {
      this.restoreState(canvas, ctx, this.redo_list, this.undo_list);
    },
    restoreState: function(canvas, ctx,  pop, push) {
      if(pop.length) {
        this.saveState(canvas, push, true);
        var restore_state = pop.pop();
        var img = new Element('img', {'src':restore_state});
        img.onload = function() {
          ctx.clearRect(0, 0, 600, 400);
          ctx.drawImage(img, 0, 0, 600, 400, 0, 0, 600, 400);  
        }
      }
    }
  };


  });


    $( "#undo" ).click(function() {
    console.log("das");
        history.undo(canvas, ctx);
    });








}); //ready  */



</script>

</head>

<body onload="init()">

<div class="container">

    <div class="row">
    <div class="col-md-12"><h3>Desenhar</h3></div>
    </div>

    <div class="row">

    </div>

    <div class="row">



        <canvas id="can" class='teste' width="500" height="400" style="border:2px solid;float:right"></canvas>

        <div class="col-md-6">
            <div class="col-md-12">
                <h3>Cores</h3>
                <div class="col-md-2"> <label style="background:green;"><input type='radio' name='cor' id='green' onclick="color(this)">Verde</label>   </div>
                <div class="col-md-2"> <label style="background:blue;"><input type='radio' name='cor' id='blue' onclick="color(this)">Azul</label>   </div>
                <div class="col-md-2"> <label style="background:red;"><input type='radio' name='cor' id='red' onclick="color(this)">Vermelho</label>   </div>
                <div class="col-md-2"> <label style="background:yellow;"><input type='radio' name='cor' id='yellow' onclick="color(this)">Amarelo</label>   </div>
                <div class="col-md-2"> <label style="background:orange;"><input type='radio' name='cor' id='orange' onclick="color(this)">Laranja</label>   </div>
                <div class="col-md-2"> <label style="background:white;"><input type='radio' name='cor' id='white' onclick="color(this)">Branco</label>   </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="col-md-12">
                <h3>Sombras</h3>
                <div class="col-md-2"> <label style="background:green;"><input type='radio' name='sombra' value='green' onclick="sombra_funcao('green')">Verde</label>   </div>
                <div class="col-md-2"> <label style="background:blue;"><input type='radio' name='sombra' value='blue' onclick="sombra_funcao('blue')">Azul</label>   </div>
                <div class="col-md-2"> <label style="background:red;"><input type='radio' name='sombra' value='red' onclick="sombra_funcao('red')">Vermelho</label>   </div>
                <div class="col-md-2"> <label style="background:yellow;"><input type='radio' name='sombra' value='yellow' onclick="sombra_funcao('yellow')">Amarelo</label>   </div>
                <div class="col-md-2"> <label style="background:orange;"><input type='radio' name='sombra' value='orange' onclick="sombra_funcao('orange')">Laranja</label>   </div>
                <div class="col-md-2"> <label style="background:white;"><input type='radio' name='sombra' value='nenhuma' onclick="sombra_funcao('nenhuma')" checked>Nenhuma</label>   </div>
            </div>
        </div>

    </div>


    <div class="row">   
        <div class="col-md-6">
            <img id="canvasimg" style="position:relative;float:left;border:1px solid #000" style="display:none;">
            <input type="button" value="save" id="btn" size="30" onclick="save()" style="">
            <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="">
            <span class="controller" id="undo">desfazer </span>  
            <span class="controller" id="redo">redo</span>
        </div>


    </div>

</div>

</body>
</html>

ctx.globalAlpha = 0.75;   // example, set/adjust before drawing