How to select a polygonal area of an image using JavaScript / jQuery? - javascript

I'd like to be able to let my users select a specific polygonal (6-8 vertices with curved lines between points) area of an image they upload - how do I go about doing this using HTML5 & JS? The only library I found allows purely rectangular selection: http://odyniec.net/projects/imgareaselect/

There's already a library that does part of what you need: polyclip.js, by Zoltan Dulac You can build a UI that allows the user to select points, then feed the data to the library and you're done.
EDIT: Here is a jsFiddle demonstration. Click to select points on the original image and press the Generate button to generate a cropped version.
HTML:
<div id="mainContent">
<div id="canvasDiv">
<br/>
<button id="generate" type="button">Generate
</button>
</div>
<h1>Result:</h1>
<div class="clipParent" style="float:left;">
</div>
</div>
JS:
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
canvas.setAttribute('id', 'canvas');
$(canvasDiv).prepend(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
$(canvas).attr({width : this.width, height: this.height});
context.drawImage(imageObj,0,0);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.drawImage(imageObj,0,0);
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
context.arc(clickX[i], clickY[i], 3, 0, 2 * Math.PI, false);
context.fillStyle = '#ffffff';
context.fill();
context.lineWidth = 5;
context.stroke();
}
}
$('#canvas').click(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#generate').click(function(){
$(".clipParent").empty();
$(".clipParent").prepend('<img src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" id="genimg" />');
var arr = [];
for(var i=0; i < clickX.length; i++){
arr.push(clickX[i]);
arr.push(clickY[i]);
}
$("#genimg")[0].setAttribute("data-polyclip",arr.join(", "));
clickX=[];
clickY=[];
redraw();
polyClip.init();
});

You could load the image on to a canvas tag and then you can do all the drawing you like on that canvas.

Related

DrawImg on canvas takes more clicks to draw

It's a tic tac toe game using canvas, used the onclick and draw image when clicked but sometimes it needs more than 2 clicks to draw the image I think it's because the other functions are outside the $(function()...) but puting them in cause errors .Sorry I'm new.
$(function(){
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.beginPath();ctx.moveTo(200,0);ctx.lineTo(200,600);ctx.stroke();
ctx.beginPath();ctx.moveTo(100,0);ctx.lineTo(100,600);ctx.stroke(); //Lineas deljuego
ctx.beginPath();ctx.moveTo(0,100);ctx.lineTo(600,100);ctx.stroke();
ctx.beginPath();ctx.moveTo(0,50);ctx.lineTo(600,50);ctx.stroke();
});
var turns=0;
function marcar(e){
var x= e.pageX;
console.log(e.pageX);
var y= e.pageY;
cuadranteX=0;
cuadranteY=0;
if(x>=7&&x<=203)
cuadranteX=0;
else{
if(x>=211&&x<=404)
cuadranteX=105;
else
cuadranteX=205;
}
if(y>=7&&y<=198)
cuadranteY=0;
else{
if(y>=212&&y<=398)
cuadranteY=53;
else
cuadranteY=105;
}
console.log(e.pageY);
console.log(cuadranteX);
console.log(cuadranteY);
draw(cuadranteX,cuadranteY);
}
function draw(x,y){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var img = new Image();
if(turns%2==0)
img.src ="./img/blackcat.png"
else
img.src ="./img/whitecat.png"
ctx.drawImage(img,x,y,90,45);
console.log("pintado");
turns++;
}
<canvas id="canvas" onclick="marcar(event)"></canvas>
What you are doing to draw the image:
var img = new Image();
if(turns%2==0)
img.src ="./img/blackcat.png"
else
img.src ="./img/whitecat.png"
ctx.drawImage(img,x,y,90,45);
... that does not guarantee the image has been fully loaded,
look at some examples of how to use that correctly:
https://www.rgraph.net/canvas/reference/drawimage.html
But for something this simple I would not use images, just draw a letter ( X or O ).
And your math/if conditions are overly complicated for this, see sample below
let size = 60 // square_size
let canvas = document.getElementById("canvas");
canvas.width = canvas.height = size * 3;
let ctx = canvas.getContext('2d');
ctx.font = '48px serif';
ctx.beginPath();ctx.moveTo(size*2,0); ctx.lineTo(size*2,size*3); ctx.stroke();
ctx.beginPath();ctx.moveTo( size,0); ctx.lineTo( size,size*3); ctx.stroke();
ctx.beginPath();ctx.moveTo(0,size*2); ctx.lineTo(size*3,size*2); ctx.stroke();
ctx.beginPath();ctx.moveTo(0, size); ctx.lineTo(size*3, size); ctx.stroke();
var turns=0;
function marcar(e){
var x= e.pageX;
var y= e.pageY;
cuadranteX = Math.floor(x / size) % 3;
cuadranteY = Math.floor(y / size) % 3;
draw(cuadranteX,cuadranteY);
}
function draw(x,y){
ctx.fillStyle = turns%2==0? "red": "blue"
ctx.fillText(turns%2==0? "X": "O", x*size + 10, y*size + 45)
turns++;
}
<canvas id="canvas" onclick="marcar(event)"></canvas>

Rotate an image on top of another canvas image

Currently, I am making a game and in need of making the image rotate toward the cursor. I am using node but the image is in a js tag in the HTML file that uses ctx to draw the image.
If I put a ctx.rotate(angle); pretty much anywhere it will rotate everything; player, map, etc. I need help so that only the player is rotated
this is a simplified version of my code:
<canvas id="ctx" width="200" height="200"></canvas>
<script>
//game
var ctx = document.getElementById("ctx").getContext("2d");
var WIDTH = 200;
var HEIGHT = 200;
var Img = {};
//player
Img.player = new Image();
Img.player.src = '/client/img/player.png';
var Player = function(/*node*/){
ctx.drawImage(Img.player, ...);
}
//map
Img.map = new Image();
Img.map.src = '/client/img/map.png';
//display everything
setInterval(function(){
ctx.clearRect(0,0,200,200);
drawMap();
for(var i in Player.list)
Player.list[i].draw();
},1000/60);
//functions
//move map so that player is always in the middle
var drawMap= function(){
var x = WIDTH/2 - Player.list[/*node*/].x;
var y = HEIGHT/2 - Player.list[/*node*/].y;
ctx.drawImage(Img.map,x,y);
}
</script>
Here's an example of what you may be looking for
const ctx = document.getElementById("ctx").getContext("2d");
const WIDTH = 500,
HEIGHT = 500;
document.getElementById("ctx").height = HEIGHT;
document.getElementById("ctx").width = WIDTH;
var Player = {
x: 50,
y: 55,
angle: 0
}
document.addEventListener("mousemove", (event) => {
var x = event.clientX - Player.x,
y = event.clientY- Player.y,
angle = Math.atan2(y,x);
Player.angle = angle
})
function draw() {
window.requestAnimationFrame(draw);
ctx.clearRect(0, 0, WIDTH, HEIGHT);
ctx.save();
ctx.translate(Player.x, Player.y);
ctx.rotate(Player.angle);
ctx.translate(-Player.x, -Player.y);
ctx.fillRect(Player.x, Player.y, 20, 20);
ctx.restore();
ctx.fillRect(150, 50, 20, 20);
}
draw();
<canvas id="ctx"></canvas>
jsfiddle here
Hope this helps!

How to scale an image for a canvas pattern?

I want to fill a Canvas with an Image and scale it to a certain width beforehand.
I am trying to achieve an effect where an image in the foreground of the canvas can be erased with the mouse to view an image in the background. This is why I need to use a pattern to fill my canvas instead of just using drawImage(). Everything works apart from the scaling of the foreground image. Here is my code for generating the pattern:
var blueprint_background = new Image();
blueprint_background.src = "myfunurl";
blueprint_background.width = window.innerWidth;
blueprint_background.onload = function(){
var pattern = context.createPattern(this, "no-repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, window.innerWidth, 768);
context.fill();
};
This does exactly what it should do, except that the image keeps its original size.
As you see, I want the image to scale to window.innerWidth (which has the value 1920 when logging it).
If needed, I can provide the rest of the code, but since the error is most likely in this snippet, I decided not to post the rest.
EDIT: Here is my full code with the suggested changes. The front ground image now displays over the full width, however the erasing does not work anymore.
JavaScript (Note that I use jQuery instead of $):
jQuery(document).ready(function() {
var cwidth = window.innerWidth;
var cheight = 768;
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(canvas, fillColor) {
var ctx = canvas.context;
canvas.isDrawing = true;
jQuery('#canvas').children().css('position:absolute; top: ' + jQuery('#Top_bar').height() + 'px');
// 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();
};
// bind mouse events
canvas.onmousemove = function(e) {
if (!canvas.isDrawing) {
return;
}
var x = e.pageX - this.offsetLeft;
var y = e.pageY - jQuery('#Top_bar').outerHeight();
var radius = 30;
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);
};
}
var container = document.getElementById('canvas');
jQuery('#canvas').css('position:absolute; top: ' + jQuery('#Top_bar').height() + 'px');
var canvas = createCanvas(container, cwidth, cheight);
init(canvas, '#ddd');
var fgimg = document.getElementById("fgimg");
fgimg.width = cwidth;
var context = canvas.node.getContext("2d");
let canvasP = document.getElementById("pattern");
canvasP.width = window.innerWidth;
canvasP.height = 768;
let ctxP = canvasP.getContext("2d");
ctxP.drawImage( fgimg, 0, 0,window.innerWidth,768 );
context.fillStyle = context.createPattern(canvasP,"no-repeat");
context.fillRect(0,0, canvas.width, canvas.height);
});
CSS:
#canvas {
background:url(http://ulmke-web.de/wp-content/uploads/2019/01/Header-6.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 768px;
}
HTML:
<div id="canvas">
<canvas id="pattern">
</div>
<div style="display:none">
<img id="fgimg" src=" http://ulmke-web.de/wp-content/uploads/2019/01/Header-5.jpg">
</div>
I would use two canvases. On the first one you draw your image and you use this canvas as an image to create the pattern. In order to scale the image you scale the size of the first canvas #pattern in my example.
For example you can do this for a 10/10 image:
canvasP.width = 10;
canvasP.height = 10;
ctxP.drawImage( redpoint, 2.5, 2.5 );
or you can do this for a 20/20 image:
canvasP.width = 20;
canvasP.height = 20;
ctxP.drawImage( redpoint, 5, 5,10,10 );
Furthermore, in my example I'm adding a little margin around the image.
let canvasP = document.getElementById("pattern");
if (canvasP && canvasP.getContext) {
let ctxP = canvasP.getContext("2d");
/*canvasP.width = 10;
canvasP.height = 10;
ctxP.drawImage( redpoint, 2.5, 2.5 ); */
canvasP.width = 20;
canvasP.height = 20;
ctxP.drawImage( redpoint, 5, 5,10,10 );
}
let canvas1 = document.getElementById("canvas");
if (canvas1 && canvas1.getContext) {
let ctx1 = canvas1.getContext("2d");
if (ctx1) {
ctx1.fillStyle = ctx1.createPattern(canvasP,"repeat");
ctx1.fillRect(0,0, canvas1.width, canvas1.height);
}
}
canvas{border:1px solid}
<img id="redpoint" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==">
<canvas id="pattern"></canvas>
<canvas id="canvas"></canvas>
I hope it helps.

Making a drawing app inside a bootstrap modal

I am trying to make a drawing app inside a bootstrap modal.
So far I have achieved this jsfiddle
Here's my code
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 570);
canvas.setAttribute('height', 300);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
But when the mouse is clicked, the drawing is being made way off from where the mouse pointer is. Check the fiddle to get an understanding of what I mean.
Also I would like to know how to make the canvas take the height and width of the modal and not pass in static width and height like this canvas.setAttribute('width', 570);
1.offsetleft is relative to parent element https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft , so you need $.offset
2.height and width is according to parent after it shows
result see https://jsfiddle.net/hj898aqb/1/

All Erase button (painting app with canvas)

I followed this tutorial to make a very basic paint app : http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
I stopped at the first step (because it's all I wanted), except that I cannot erase like in the first example shown on the tutorial website. I suppose I made a mistake at linking the javascript function called "redraw" to the Erase button.
Here is my code :
<head>
<title>TEST PAINTING</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', "500");
canvas.setAttribute('height', "200");
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
//
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
$('#clearCanvasSimple').click(function(e){
clearCanvs();
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw()
{
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#333";
context.lineJoin = "round";
context.lineWidth = 8;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
function clearCanvas()
{
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
}
});
</script>
</head>
<body>
<div><button id="clearCanvasSimple" href="javascript:void(0)" onClick="clearCanvas()" type="button">Erase</button></div>
<div class="cadre" id="canvasDiv"></div>
</body>
Does anyone know how I could make this "Erase" button work?
Thank you !
You've set the redraw button to just repaint the code again.
It should be doing something like this:
function clearCanvas()
{
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
});
We clear the current points, then clear the canvas.
Place the clearCanvas function after the redraw function and add the following jquery to register the click on the button (all in side the ready function).
$('#clearCanvasSimple').click(function(e){
clearCanvas();
});

Categories