html描画ツールで色を写真に置き換える

Question

html用のこの描画ツールでは、色（#ddd）を写真に置き換えたいと考えています。代わりに、現在のバージョンの

は私が写真と灰色の四角形を交換したいです。どのようにそれを行う上の任意のアイデアですか？そして、私は四角形の位置を変えることはできません。

(function() { 
    function createCanvas(parent, width, height) { 
    var canvas = {}; 
    canvas.node = document.createElement('canvas'); 
    canvas.context = canvas.node.getContext('2d'); 
    canvas.node.width = width || 100; 
    canvas.node.height = height || 100; 
    parent.appendChild(canvas.node); 
    return canvas; 
} 

function init(container, width, height, fillColor) { 
    var canvas = createCanvas(container, width, height); 
    var ctx = canvas.context; 
    // define a custom fillCircle method 
    ctx.fillCircle = function(x, y, radius, fillColor) { 
     this.fillStyle = fillColor; 
     this.beginPath(); 
     this.moveTo(x, y); 
     this.arc(x, y, radius, 0, Math.PI * 2, false); 
     this.fill(); 
    }; 
    ctx.clearTo = function(fillColor) { 
     ctx.fillStyle = fillColor; 
     ctx.fillRect(0, 0, width, height); 
    }; 
    ctx.clearTo(fillColor || "#ddd"); 

    // bind mouse events 
    canvas.node.onmousemove = function(e) { 
     if (!canvas.isDrawing) { 
      return; 
     } 
     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 
     var radius = 25; // or whatever 
     var fillColor = '#ff0000'; 
     ctx.globalCompositeOperation = 'destination-out'; 
     ctx.fillCircle(x, y, radius, fillColor); 
    }; 
    canvas.node.onmousedown = function(e) { 
     canvas.isDrawing = true; 
    }; 
    canvas.node.onmouseup = function(e) { 
     canvas.isDrawing = false; 
    }; 
} 

var container = document.getElementById('canvas'); 
init(container, 400, 400, '#ddd'); 

})(); 

Answer 1

これは、別のキャンバスの上にソリッドキャンバスを重ねることで実現できます。トップキャンバスの一部を消去すると、下のキャンバスが表示されます。

次のコードは99％のコードを2つの別々の投稿から再利用しています。

• Loading the image onto the canvas.
• Erasing the top canvas (layer).

// Borrowed from here: https://stackoverflow.com/a/4776378 
 
var canvasWrapper = document.getElementsByClassName('layer-wrapper')[0]; 
 
var imageLayer = canvasWrapper.querySelector('.layer-image'); 
 
var drawLayer = canvasWrapper.querySelector('.layer-draw'); 
 
var img = new Image; 
 
img.onload = function() { 
 
    imageLayer.width = drawLayer.width = img.width; 
 
    imageLayer.height = drawLayer.height = img.height; 
 

 
    var imageCtx = imageLayer.getContext('2d'); 
 
    imageCtx.drawImage(img, 0, 0); 
 

 
    var drawCtx = drawLayer.getContext('2d'); 
 
    drawCtx.fillStyle = '#7F7F7F'; 
 
    drawCtx.fillRect(0, 0, img.width, img.height); 
 
}; 
 
img.src = 'https://pbs.twimg.com/profile_images/462372073982025728/jTHaxsxd.jpeg'; 
 

 

 
// Borrowed from here: https://stackoverflow.com/a/25916334 
 
var RADIUS = 32; 
 
var canvas = canvasWrapper.querySelector('.layer-wrapper .layer-draw'); 
 
var ctx = canvas.getContext('2d'); 
 
var lastX; 
 
var lastY; 
 
var strokeColor = 'red'; 
 
var strokeWidth = 5; 
 
var mouseX; 
 
var mouseY; 
 
var canvasOffset = $(canvas).offset(); 
 
var offsetX = canvasOffset.left; 
 
var offsetY = canvasOffset.top; 
 
var isMouseDown = false; 
 

 
function handleMouseDown(e) { 
 
    mouseX = parseInt(e.clientX - offsetX); 
 
    mouseY = parseInt(e.clientY - offsetY); 
 

 
    // Put your mousedown stuff here 
 
    lastX = mouseX; 
 
    lastY = mouseY; 
 
    isMouseDown = true; 
 
} 
 

 
function handleMouseUp(e) { 
 
    mouseX = parseInt(e.clientX - offsetX); 
 
    mouseY = parseInt(e.clientY - offsetY); 
 

 
    // Put your mouseup stuff here 
 
    isMouseDown = false; 
 
} 
 

 
function handleMouseOut(e) { 
 
    mouseX = parseInt(e.clientX - offsetX); 
 
    mouseY = parseInt(e.clientY - offsetY); 
 

 
    // Put your mouseOut stuff here 
 
    isMouseDown = false; 
 
} 
 

 
function handleMouseMove(e) { 
 
    mouseX = parseInt(e.clientX - offsetX); 
 
    mouseY = parseInt(e.clientY - offsetY); 
 

 
    // Put your mousemove stuff here 
 
    if (isMouseDown) { 
 
    ctx.beginPath(); 
 
    if (mode == "pen") { 
 
     ctx.globalCompositeOperation = "source-over"; 
 
     ctx.moveTo(lastX, lastY); 
 
     ctx.lineTo(mouseX, mouseY); 
 
     ctx.stroke(); 
 
    } else { 
 
     ctx.globalCompositeOperation = "destination-out"; 
 
     ctx.arc(lastX, lastY, RADIUS, 0, Math.PI * 2, false); 
 
     ctx.fill(); 
 
    } 
 
    lastX = mouseX; 
 
    lastY = mouseY; 
 
    } 
 
} 
 

 
$(canvas).mousedown(function(e) { 
 
    handleMouseDown(e); 
 
}).mousemove(function(e) { 
 
    handleMouseMove(e); 
 
}).mouseup(function(e) { 
 
    handleMouseUp(e); 
 
}).mouseout(function(e) { 
 
    handleMouseOut(e); 
 
}); 
 

 
var mode = 'eraser'; 
 
//$('#pen') .click(function() { mode = 'pen'; }); 
 
//$('#eraser').click(function() { mode = 'eraser'; });

.layer-wrapper { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 300px; 
 
} 
 

 
.layer-wrapper canvas.layer { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.layer-image { 
 
    z-index: 1; 
 
} 
 

 
.layer-draw { 
 
    z-index: 100; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="layer-wrapper"> 
 
    <canvas class="layer layer-image"></canvas> 
 
    <canvas class="layer layer-draw"></canvas> 
 
</div>