Related
I have an image gallery. When a image from gallery is clicked, it is rendered on a canvas. The objective is to allow users to draw rectangles on regions of interest and capture the rectangle coordinates. The drawn rectangles vanishes when I move to the next image.
The following is the code and I have tried to comment as much as I can:
//get clicked image name and store in a variable
function clickedImage(clicked_id) {
var clickedImg = document.getElementById(clicked_id).src;
var clickedImg = clickedImg.replace(/^.*[\\\/]/, '');
localStorage.setItem("clickedImg", clickedImg);
//initiate canvas to load image
var canvas = document.getElementById("iriscanvas");
var ctx = canvas.getContext("2d");
var thumbNails = document.getElementById("loaded_img_panel");
var pic = new Image();
pic.onload = function() {
ctx.drawImage(pic, 0,0)
}
//load the image from the thumbnail on to the canvas
thumbNails.addEventListener('click', function(event) {
pic.src = event.target.src;
});
//thickness of rectangle and count of rectangles
var strokeWidth = 3;
drawCount = 1;
//initiate mouse events
canvas.addEventListener("mousemove", function(e) {
drawRectangleOnCanvas.handleMouseMove(e);
}, false);
canvas.addEventListener("mousedown", function(e) {
drawRectangleOnCanvas.handleMouseDown(e);
}, false);
canvas.addEventListener("mouseup", function(e) {
drawRectangleOnCanvas.handleMouseUp(e);
}, false);
canvas.addEventListener("mouseout", function(e) {
drawRectangleOnCanvas.handleMouseOut(e);
}, false);
function reOffset() {
var BB = canvas.getBoundingClientRect();
recOffsetX = BB.left;
recOffsetY = BB.top;
}
var recOffsetX, recOffsetY;
reOffset();
window.onscroll = function(e) {
reOffset();
}
window.onresize = function(e) {
reOffset();
}
var isRecDown = false;
var startX, startY;
var rects = [];
var newRect;
var drawRectangleOnCanvas = {
handleMouseDown: function(e) {
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
startX = parseInt(e.clientX - recOffsetX);
startY = parseInt(e.clientY - recOffsetY);
// Put your mousedown stuff here
isRecDown = true;
},
handleMouseUp: function(e) {
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX = parseInt(e.clientX - recOffsetX);
mouseY = parseInt(e.clientY - recOffsetY);
// Put your mouseup stuff here
isRecDown = false;
//if(!willOverlap(newRect)){
rects.push(newRect);
//}
drawRectangleOnCanvas.drawAll();
var brand = localStorage.getItem("brandNode");
var clickImg = localStorage.getItem("clickedImg");
//get x,y,w,h coordinates depending on how the rectangle is drawn.
if((mouseX-startX) < 0) {
stX = startX + (mouseX-startX)
} else {
stX = startX
}
if((mouseY-startY) < 0) {
stY = startY + (mouseY-startY)
} else {
stY = startY
}
if((mouseX-startX) < 0) {
stW = startX - stX
} else {
stW = mouseX - startX
}
if((mouseY-startY) < 0) {
stH = startY - stY
} else {
stH = mouseY - startY
}
//log the coordinates of the rectangles
var dat = {image : clickImg, brand: brand, x : stX, y : stY, w: stW, h: stH};
var dat = JSON.stringify(dat);
console.log(dat);
},
drawAll: function() {
ctx.drawImage(pic, 0, 0);
ctx.lineWidth = strokeWidth;
var brand = localStorage.getItem("brandNode");
for (var i = 0; i < rects.length; i++) {
var r = rects[i];
ctx.strokeStyle = r.color;
ctx.globalAlpha = 1;
ctx.strokeRect(r.left, r.top, r.right - r.left, r.bottom - r.top);
ctx.beginPath();
//ctx.arc(r.left, r.top, 15, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = r.color;
ctx.fill();
var text = brand;
ctx.fillStyle = "#fff";
var font = "bold " + 12 + "px serif";
ctx.font = font;
var width = ctx.measureText(text).width;
var height = ctx.measureText("h").height; // this is a GUESS of height
ctx.fillText(text, r.left-1, r.top - 10)
}
},
handleMouseOut: function(e) {
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX = parseInt(e.clientX - recOffsetX);
mouseY = parseInt(e.clientY - recOffsetY);
// Put your mouseOut stuff here
isRecDown = false;
},
handleMouseMove: function(e) {
if (!isRecDown) {
return;
}
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX = parseInt(e.clientX - recOffsetX);
mouseY = parseInt(e.clientY - recOffsetY);
newRect = {
left: Math.min(startX, mouseX),
right: Math.max(startX, mouseX),
top: Math.min(startY, mouseY),
bottom: Math.max(startY, mouseY),
color: "#9afe2e"
}
drawRectangleOnCanvas.drawAll();
ctx.strokeStyle = "#9afe2e";
ctx.lineWidth = strokeWidth;
ctx.globalAlpha = 1;
ctx.strokeRect(startX, startY, mouseX - startX, mouseY - startY);
}
}
}
When I move to the next image the rectangles created on the previous image is removed. I don't know if I have to use canvas.toDataURL to retain the rectangles, because I have thousands of images in the gallery and not sure if I will have space in the browser, though not all the images are going to the used for drawing rectangles.
Moreover, after drawing the rectangles when I click on the same image, it clears all the rectangles.
How can I retain the drawn rectangles within a session at least?
Layer 2 canvases over each other. Render the image into the bottom canvas, and draw on the top one. That way, changing the image won't affect the drawn lines.
A <canvas> works just like a real-life painter's canvas. There is no concept of layers or "objects" on a canvas. It's all just paint on a single surface.
When you draw a different image on a canvas, you're overriding everything that was on the canvas already.
I have a canvas function which draws a square if I click on the canvas field and move the mouse, that works so far.
My Problem is that if I release the mouse and click at the canvas again the old drawn rectangle vanishes.
How do I make it possible that the old drawn does not get vanished.
My function:
function foo() {
var tool = this;
this.started = false;
var canvasx = canvas.offsetLeft;
var canvasy = canvas.offsetTop;
var last_mousex = 0;
var last_mousey = 0;
var mousex = 0;
var mousey = 0;
this.mousedown = function (ev) {
if(checkboxSquare.checked) {
last_mousex = parseInt(ev.clientX-canvasx);
last_mousey = parseInt(ev.clientY-canvasy);
context.strokeStyle = $('#selectColor').val();
context.lineWidth = $('#selectWidth').val();
tool.started = true;
}
};
this.mousemove = function (ev) {
if (tool.started && checkboxSquare.checked) {
mousex = parseInt(ev.clientX-canvasx);
mousey = parseInt(ev.clientY-canvasy);
context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
context.beginPath();
var width = mousex-last_mousex;
var height = mousey-last_mousey;
context.rect(last_mousex,last_mousey,width,height);
context.stroke();
}
};
this.mouseup = function (ev) {
if (tool.started && checkboxSquare.checked) {
tool.mousemove(ev);
tool.started = false;
}
};
}
It Looks something like this: http://jsfiddle.net/AbdiasSoftware/kqW4X/
The old drawn rectangle vanishes on click because, you are clearing the entire canvas each time before drawing a rectangle.
The easiest workaround would be to save the entire canvas as an image on mouseup and draw that image before drawing each rectangle.
var canvas;
var _foo = new foo();
canvas.onmousedown = _foo.mousedown;
canvas.onmousemove= _foo.mousemove;
canvas.onmouseup = _foo.mouseup;
function foo() {
canvas = $('#canvas')[0];
var context = canvas.getContext('2d');
var checkboxSquare = $('#checkboxSquare')[0];
var img = new Image();
var tool = this;
this.started = false;
var last_mousex = 0;
var last_mousey = 0;
var mousex = 0;
var mousey = 0;
this.mousedown = function (ev) {
if(checkboxSquare.checked) {
last_mousex = ev.offsetX;
last_mousey = ev.offsetY;
context.strokeStyle = $('#selectColor').val();
context.lineWidth = $('#selectWidth').val();
tool.started = true;
}
};
this.mousemove = function (ev) {
if (tool.started && checkboxSquare.checked) {
mousex = ev.offsetX;
mousey = ev.offsetY;
context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
context.drawImage(img, 0, 0); // draw saved canvas (image)
context.beginPath();
var width = mousex-last_mousex;
var height = mousey-last_mousey;
context.rect(last_mousex,last_mousey,width,height);
context.stroke();
}
};
this.mouseup = function (ev) {
if (tool.started && checkboxSquare.checked) {
tool.mousemove(ev);
img.src = canvas.toDataURL(); // save canvas as image
tool.started = false;
}
};
}
canvas {
border: 1px solid black;
cursor: default;
margin-top: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkboxSquare">Square | Color
<select id="selectColor">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select> | Width
<select id="selectWidth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<canvas id="canvas" width="400" height="400"></canvas>
Just create a background canvas same as the main canvas. When you drag out a new box, first draw the background canvas (with all the past boxes) on the main canvas then the current box being drawn. When you finish dragging the box, just daw it to the background canvas.
const canvas = document.createElement("canvas");
const background = document.createElement("canvas");
canvas.style.border="2px solid black";
canvas.style.cursor = "crosshair";
background.width = canvas.width = innerWidth - 24;
background.height = canvas.height = innerHeight - 24;
const ctx = canvas.getContext("2d");
background.ctx = background.getContext("2d");
document.body.appendChild(canvas);
const bounds = canvas.getBoundingClientRect();
var currentBox;
const boxStyle = {
fillStyle : "#4aF",
strokeStyle : "black",
lineWidth : 3,
lineJoin : "round",
}
const mouse = { x : 0, y : 0,button : false, changed : false };
["mousemove","mousedown","mouseup"].forEach(en => document.addEventListener(en, mouseEvent));
function createBox(x,y,w,h,style){ return {x,y,w,h,style,draw : drawBox} }
function drawBox(ctx){
setStyle(ctx, this.style);
ctx.beginPath();
ctx.rect(this.x,this.y,this.w,this.h);
ctx.fill();
ctx.stroke();
}
function setStyle(ctx, style){ Object.keys(style).forEach(key => ctx[key] = style[key]) }
function mouseEvent(event) {
mouse.x = event.pageX - bounds.left - scrollX;
mouse.y = event.pageY - bounds.top - scrollY;
if(event.type === "mousedown"){ mouse.button = true }
else if(event.type === "mouseup"){ mouse.button = false }
mouse.changed = true;
}
function mainLoop(){
var b = currentBox; // alias for readability
if(mouse.changed){
if(mouse.button){
if(!b){
b = currentBox = createBox(mouse.x,mouse.y,0,0,boxStyle);
}else{
b.w = mouse.x - b.x;
b.h = mouse.y - b.y;
}
}else if(b){
b.draw(background.ctx);
b = currentBox = undefined;
}
if(b){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(background,0,0);
b.draw(ctx);
canvas.style.cursor = "none";
}else{
canvas.style.cursor = "crosshair";
}
mouse.changed = false;
}
requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);
Extra Note. Capture the mouse using the Document
When you create canvas drawing apps you should listen to the document mouse events rather than the canvas. When the mouse button is down the mouse is captured and will continue to send mouse events while the mouse is down, even if you have moved off the canvas, document, or event outside the browser window.
This means you can drag content of the canvas and not worry about losing the mouseup event.
Burn some time.
I have some time to burn so will extend the demo above to include selecting and moving existing boxes. Draw boxes as normal. Mouse over boxes will highlight them, click to select them. When selected can be dragged. Uses the same method background image to hold old boxes. But have added a box list to hold old boxes
A more extensive example
const canvas = document.createElement("canvas");
const background = document.createElement("canvas");
canvas.style.border="2px solid black";
canvas.style.cursor = "crosshair";
background.width = canvas.width = innerWidth - 24;
background.height = canvas.height = innerHeight - 24;
const ctx = canvas.getContext("2d");
background.ctx = background.getContext("2d");
document.body.appendChild(canvas);
const bounds = canvas.getBoundingClientRect();
var currentBox;
var selectedBox;
var mouseOverBox;
const styles = {
box : {
fillStyle : "#4aF",
strokeStyle : "black",
lineWidth : 3,
lineJoin : "round",
},
highlight : {
strokeStyle : "white",
lineWidth : 1,
lineJoin : "round",
setLineDash : [[10,10]],
},
selected : {
strokeStyle : "red",
lineWidth : 2,
lineJoin : "round",
setLineDash : [[5,5]],
},
}
const boxes = {
items : [],
add(box){ // add a box and fix width and height to positive
if(box.w < 0){
box.x += box.w;
box.w = -box.w;
}
if(box.h < 0){
box.y += box.h;
box.h = -box.h;
}
boxes.items.push(box)
},
apply(name, ...args){
for(var i = 0; i < boxes.items.length; i ++ ){
boxes.items[i][name](...args);
}
},
};
const mouse = { x : 0, y : 0,button : false, changed : false };
["mousemove","mousedown","mouseup"].forEach(en => document.addEventListener(en, mouseEvent));
const boxBehaviours = {
draw(ctx, style = this.style){
if(!this.hide){
setStyle(ctx, style);
ctx.beginPath();
ctx.rect(this.x,this.y,this.w,this.h);
if(style.fillStyle) { ctx.fill() }
if(style.strokeStyle) {ctx.stroke() }
}
},
isPointOver(x,y){
var b = this;
if(x >= b.x && x < b.x + b.w && y >= b.y && y < b.y + b.h){
b.mouseOver = true;
boxBehaviours.topMouseBox = b;
}else {
b.mouseOver =false;
}
},
}
function createBox(x,y,w,h,style){
return {x,y,w,h,style, ...boxBehaviours};
}
function setStyle(ctx, style){
Object.keys(style).forEach(key => {
if(typeof ctx[key] === "function"){
ctx[key](...style[key]);
}else{
ctx[key] = style[key];
}
})
}
function mouseEvent(event) {
mouse.x = event.pageX - bounds.left - scrollX;
mouse.y = event.pageY - bounds.top - scrollY;
if(event.type === "mousedown"){ mouse.button = true }
else if(event.type === "mouseup"){ mouse.button = false }
}
function redrawBackground(){
background.ctx.clearRect(0,0,canvas.width,canvas.height)
boxes.apply("draw",background.ctx);
}
function mainLoop(time){
var b = currentBox; // alias for readability
var mob = mouseOverBox; // alias for readability
var sb = selectedBox; // alias for readability
// first check mouse button. If button down could be
// dragging a selected box or creating a new box
if(mouse.button){
if(sb){ // is selected box
if(!mouse.drag){ // start the drag
mouse.drag = {x : mouse.x - sb.x, y : mouse.y - sb.y}
}else{ // move the box
sb.x = mouse.x- mouse.drag.x;
sb.y = mouse.y- mouse.drag.y;
}
}else{ // else muse be create (or select click)
if(!b){
b = currentBox = createBox(mouse.x,mouse.y,0,0,styles.box);
}else{
b.w = mouse.x - b.x;
b.h = mouse.y - b.y;
}
}
}else if(b || sb){ // mouse up and there is a box
if(sb){ // if selected box
if(mouse.drag){ // is dragging then drop it
mouse.drag = undefined;
sb.hide = false;
redrawBackground();
sb = selectedBox = undefined;
}
// is the mouse is down and has not moved over 2 pixels
// and there is a mob (mouseOverBox) under it
// then dump the new box and select the mob box
}else if(Math.abs(b.w) < 2 && Math.abs(b.h) < 2 && mob){
sb = selectedBox = mob;
mob = mouseOverBox = undefined;
b = currentBox = undefined;
sb.hide = true;
redrawBackground();
}else{
// just a normal box add it to box array
// draw it and remove it from currentBox
boxes.add(b);
b.draw(background.ctx);
b = currentBox = undefined;
}
}
// clear andf draw background
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(background,0,0);
if(b){ // is there a current box then draw that
b.draw(ctx);
canvas.style.cursor = "none";
} else { // no current box so
// find any boxes under the mouse
boxBehaviours.topMouseBox = null;
boxes.apply("isPointOver",mouse.x, mouse.y);
// is there a selected box (sb)
if(sb){ // yes selected box then draw it
ctx.save();
styles.selected.lineDashOffset = time / 25;
sb.hide = false;
sb.draw(ctx,styles.selected);
sb.hide = true;
ctx.restore();
canvas.style.cursor = "move";
// no selected box sp then just high light the box under the
// mouse and assign it to mouseOverBox (mob);
}else if(boxBehaviours.topMouseBox){
mob = mouseOverBox = boxBehaviours.topMouseBox;
ctx.save();
styles.highlight.lineDashOffset = time / 20;
mob.draw(ctx, styles.highlight);
ctx.restore();
canvas.style.cursor = "pointer";
}else{
canvas.style.cursor = "crosshair";
}
}
requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);
var point = [];
var clicks = 0;
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
// Creating a tmp canvas
var tmp_canvas = document.createElement('canvas');
var tmp_ctx = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = parseInt(sketch_style.getPropertyValue('width'));
tmp_canvas.height = parseInt(sketch_style.getPropertyValue('height'));
sketch.appendChild(tmp_canvas);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.id = 'paint';
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
sketch.appendChild(canvas);
tmp_canvas.addEventListener('mousedown', mousedown, false);
tmp_canvas.addEventListener('mousemove', mousemove, false);
tmp_canvas.addEventListener('mouseup', mouseup, false);
function mousemove(e) {
if (clicks == 1) {
x = e.layerX - this.offsetLeft;
y = e.layerY - this.offsetTop;
showRect(x, y);
}
}
function showRect(x, y) {
tmp_ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
tmp_ctx.beginPath();
var width = x - point[0].x;
var height = y - point[0].y;
tmp_ctx.rect(point[0].x, point[0].y, width, height);
tmp_ctx.stroke();
}
function mousedown(e) {
x = e.layerX - this.offsetLeft;
y = e.layerY - this.offsetTop;
point.push({
x,
y
});
clicks++;
};
function mouseup() {
context.drawImage(tmp_canvas, 0, 0);
clicks = 0;
point.length = 0;
}
html, body {
width: 100% ;
height: 100% ;
}
#sketch {
border: 10px solid gray;
height: 100% ;
position: relative;
}
#tmp_canvas {
position: absolute;
left: 0px;
right: 0;
bottom: 0;
top: 0;
cursor: crosshair;
}
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="sketch">
</div>
</body>
</html>
Try to do in temporary canvas and redraw all in main.
jsfiddle:-https://jsfiddle.net/durga598/v0m06faz/
I'm assuming that the foo() function is being called for every frame, either through setInterval or requestAnimationFrame. If my assumption is right, the reason why your previously drawn square disappears is because you are only storing the x and y coordinates of one rectangle, and every time you click on the canvas again, it gets overwritten by the new values for the new rectangle.
To solve your problem, you should store the x and y coordinates as well as the dimensions of the square on mouseup. These coordinates can be stored in an array.
var squares = [];
this.mouseup = function (ev) {
// other code
var square = {
x: last_mousex,
y: last_mousey,
width: mousex - last_mousex,
height: mousey - last_mousey
};
squares.push(square);
};
Now every time you draw the square, draw the squares stored in the squares array first.
this.mousemove = function (ev) {
if (tool.started && checkboxSquare.checked) {
// other code
context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
// draw each square in the squares array after clearning the canvas
squares.forEach(function(square) {
context.beginPath();
context.rect(square.x, square.y, square.width, square.height);
});
context.beginPath();
var width = mousex - last_mousex;
var height = mousey - last_mousey;
context.rect(last_mousex, last_mousey, width, height);
context.stroke();
}
};
You'll see some code repetitions in drawing the squares, it's a good opportunity to abstract it into a separate function.
I'm trying to make a scratch card using canvas with JS. my question is:
can I know if the user have "erased" all the canvas?
I have two images one on top the other, and I managed to make the user "erase" the on-top canvas image. I want to fire up a function when the canvas is empty\completly erased.
Thanks
var offsetT;
var offsetL;
var canvas = document.createElement('canvas');
canvas.id = "canvas";
var canvasWidth = 290;
var canvasheight = 269;
canvas.width = canvasWidth;
canvas.height = canvasheight;
var context = canvas.getContext("2d");
var scratcher = document.getElementById("scratcher");
var radius = 20; //Brush Radius
context.drawImage(scratcher,0,0);
// set image as pattern for fillStyle
context.globalCompositeOperation = 'destination-out';
context.fillStyle = context.createPattern(scratcher, "repeat");
// for demo only, reveals image while mousing over canvas
canvas.onmousemove = function (e) {
var r = this.getBoundingClientRect(),
x = e.clientX - r.left,
y = e.clientY - r.top;
context.beginPath();
context.moveTo(x + radius, y);
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
};
document.body.appendChild(canvas);
document.addEventListener('touchmove', function(e){
var touchobj = e.changedTouches[0]; // reference first touch point (ie: first finger)
var x = touchobj.clientX;
var y = touchobj.clientY;
offsetT = canvas.offsetTop;
offsetL = canvas.offsetLeft;
context.beginPath();
context.moveTo(x-offsetL + radius, y-offsetT);
context.arc(x-offsetL,y-offsetT, radius, 0, 2 * Math.PI);
context.fill();
var cursor = document.getElementById('cursor');
cursor.style.display = 'block';
cursor.style.left = x+ "px";
cursor.style.top = y+ "px";
e.preventDefault();
}, false);
The only way is to check the imageData of the canvas :
var data = ctx.getImageData(0,0,ctx.canvas.width, ctx.canvas.height).data;
var isEmpty = !Array.prototype.some.call(data, function(p){return p>0;});
var ctx = c.getContext('2d');
var isEmpty = function(ctx){
var data = ctx.getImageData(0,0,ctx.canvas.width, ctx.canvas.height).data;
return !Array.prototype.some.call(data, function(p){return p>0;});
}
//first check before drawing
log.innerHTML += isEmpty(ctx)+' ';
//no more empty
ctx.fillRect(0,0,10,10);
// recheck
log.innerHTML += isEmpty(ctx);
/*
we could also have used a for loop :
//in Function
for(var i=0; i<data.length; i++){
if(data[i]>0){
return false;
}
return true;
}
*/
<canvas id="c"></canvas>
<p id="log"></p>
I hope you can help me with my problem. I am writing a mobile application with cordova and ionic and we need a function to annotate images before we upload them.
I want to be able to add annotations to an image (at the moment only lines) without resizing the image. But since the screenspace on phones is small i am now using 2 canvas directly placed above each other.
One the first one i render the scaled down image i want to annotate, on the 2nd one i make the annotations. Then i render the original image on 3 canvas and upscale the annotations to the size of the original image.
var finalcanvas = document.createElement('canvas');
var ctxfinal = finalcanvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
finalcanvas.width = imageObj.width;
finalcanvas.height = imageObj.height;
ctxfinal.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
var canvaslines = document.getElementById("canvasdraw");
ctxfinal.drawImage(canvaslines, 0, 0, imageObj.width, imageObj.height);
$scope.editimage.image = finalcanvas.toDataURL("image/jpeg");
This works fine, but the only downside is that the annotations are rather pixely. I assume there must be a library or something which should make things like this easier, but no matter how much i searched i could not find anything. But maybe i used the wrong keywords since i am not a very adept programmer and not a native speaker. Thanks for all your help in advance
Edit: Here is a link to a jsfiddle of my code http://jsfiddle.net/q97szydq/14/
One solution would be to store all your points into an array, then redraw them on your new canvas (after you rescaled the points) :
var drawnLines = [];
//in your start functions :
drawnLines.push(["m", x, y]);
//in your move functions :
drawnLines.push(["l", x, y]);
//then in your hideModal function :
var ratio = finalcanvas.width/document.getElementById("canvasdraw").width;
ctxfinal.lineWidth = 3*ratio;
for(i=0; i<drawnLines.length; i++){
var xm = drawnLines[i][1]*ratio;
var ym = drawnLines[i][2]*ratio;
switch (drawnLines[i][0]){
case "l" : ctxfinal.lineTo(xm, ym);
case "m" : ctxfinal.moveTo(xm, ym);
}
}
ctxfinal.stroke();
ctx = document.getElementById("canvasdraw").getContext("2d");
ctx2 = document.getElementById("canvasimg").getContext("2d");
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 3;
var imageObj = new Image();
imageObj.onload = function() { //ion-header-bar
var MAX_WIDTH = 300;
var MAX_HEIGHT = 500;
tempW = imageObj.width;
tempH = imageObj.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
document.getElementById("canvasdraw").height = tempH;
document.getElementById("canvasdraw").width = tempW;
document.getElementById("canvasimg").height = tempH;
document.getElementById("canvasimg").width = tempW;
ctx2.drawImage(imageObj, 0, 0, tempW, tempH);
};
imageObj.src = "http://images2.fanpop.com/image/photos/12900000/Cute-kittens-12929201-1600-1200.jpg";
// setup to trigger drawing on mouse or touch
drawTouch();
drawPointer();
drawMouse();
var drawnLines = [];
//all draw functions have minus 50px height to adjust for header
// prototype to start drawing on touch using canvas moveTo and lineTo
function drawTouch() {
var start = function(e) {
ctx.beginPath();
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY - 50;
ctx.moveTo(x, y);
drawnLines.push(["m", x, y]);
};
var move = function(e) {
e.preventDefault();
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY - 50;
ctx.lineTo(x, y);
ctx.stroke();
drawnLines.push(["l", x, y]);
};
document.getElementById("canvasdraw").addEventListener("touchstart", start, false);
document.getElementById("canvasdraw").addEventListener("touchmove", move, false);
};
// prototype to start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
function drawPointer() {
var start = function(e) {
e = e.originalEvent;
ctx.beginPath();
x = e.pageX;
y = e.pageY - 50;
ctx.moveTo(x, y);
drawnLines.push(["m", x, y]);
};
var move = function(e) {
e.preventDefault();
e = e.originalEvent;
x = e.pageX;
y = e.pageY - 50;
ctx.lineTo(x, y);
ctx.stroke();
drawnLines.push(["l", x, y]);
};
document.getElementById("canvasdraw").addEventListener("MSPointerDown", start, false);
document.getElementById("canvasdraw").addEventListener("MSPointerMove", move, false);
};
// prototype to start drawing on mouse using canvas moveTo and lineTo
function drawMouse() {
var clicked = 0;
var start = function(e) {
clicked = 1;
ctx.beginPath();
x = e.pageX;
y = e.pageY - 50;
ctx.moveTo(x, y);
drawnLines.push(["m", x, y]);
};
var move = function(e) {
if (clicked) {
x = e.pageX;
y = e.pageY - 50;
ctx.lineTo(x, y);
ctx.stroke();
drawnLines.push(["l", x, y]);
}
};
var stop = function(e) {
clicked = 0;
};
document.getElementById("canvasdraw").addEventListener("mousedown", start, false);
document.getElementById("canvasdraw").addEventListener("mousemove", move, false);
document.addEventListener("mouseup", stop, false);
};
var hideModal = function() {
var finalcanvas = document.getElementById("finalcanvas");
var ctxfinal = finalcanvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
finalcanvas.width = imageObj.width;
finalcanvas.height = imageObj.height;
ctxfinal.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
ctxfinal.beginPath();
var ratio = finalcanvas.width / document.getElementById("canvasdraw").width;
ctxfinal.lineWidth = 3 * ratio;
for (i = 0; i < drawnLines.length; i++) {
var xm = drawnLines[i][1] * ratio;
var ym = drawnLines[i][2] * ratio;
switch (drawnLines[i][0]) {
case "l":
ctxfinal.lineTo(xm, ym);
case "m":
ctxfinal.moveTo(xm, ym);
}
}
ctxfinal.stroke();
//I then generate a a image from this final canvas. So now i have the image in the original size + the sadly a bit pixely annotations
//$scope.editimage.image = finalcanvas.toDataURL("image/jpeg");
};
imageObj.src = "http://images2.fanpop.com/image/photos/12900000/Cute-kittens-12929201-1600-1200.jpg";
};
canvas {
border: 1px solid #000;
}
<div id="page">
<div class="buttons" style="height:50px;">
<button class="button button-clear" onclick="hideModal()">save</button>
</div>
<canvas id="canvasimg" style="position:absolute;z-index:1;"></canvas>
<canvas id="canvasdraw" style="position:absolute;background:transparent;z-index:99;"></canvas>
</div>
<div style="position:absolute;top:300px;">
<canvas id="finalcanvas"></canvas>
I used this Resize an image with javascript for use inside a canvas createPattern to resize the initial image, but when I try to put the same code in my drag/drop functionality, it does not work correctly (it creates a new image and when I try to drag it, it gets strange - see image below. the "O" has the image before dragging/dropping, the "P" has the image after dragging/dropping).
Here is the code I am using:
function photos_create_preview_image(element)
{
console.log(element.id);
if(element.id.indexOf("canvas") != -1)
{
var canvas = document.getElementById(element.id);
var ctx = canvas.getContext("2d");
var canvasOffset = $("#" + element.id).offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isDown = false;
var startX;
var startY;
var imgX = 0;
var imgY = 0;
var imgWidth, imgHeight;
var mouseX, mouseY;
var new_img = new Image();
new_img.onload = function()
{
var tempCanvas = photos_create_temp_canvas(new_img);
imgWidth = new_img.width;
imgHeight = new_img.height;
//var pattern = ctx.createPattern(new_img, "no-repeat");
var pattern = ctx.createPattern(tempCanvas, "no-repeat");
ctx.fillStyle = pattern;
ctx.fill();
};
new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
function photos_create_temp_canvas(new_img)
{
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = new_img.width / 3; //TODO: Figure out what this should be, right now it is just a "magic number"
tempCanvas.height = new_img.height / 3 ;
tCtx.drawImage(new_img,0,0,new_img.width,new_img.height,0,0,new_img.width / 3,new_img.height / 3);
return tempCanvas;
}
function handleMouseDown(e)
{
e.preventDefault();
startX = parseInt(e.pageX - window.scrollX);
startY = parseInt(e.pageY - window.scrollY);
if (startX >= imgX && startX <= imgX + imgWidth && startY >= imgY && startY <= imgY + imgHeight) {
isDown = true;
}
}
function handleMouseUp(e)
{
e.preventDefault();
isDown = false;
}
function handleMouseOut(e)
{
e.preventDefault();
isDown = false;
}
function handleMouseMove(e)
{
if (!isDown) {
return;
}
e.preventDefault();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
if (!isDown) {
return;
}
imgX += mouseX - startX;
imgY += mouseY - startY;
startX = mouseX;
startY = mouseY;
var tempCanvas = photos_create_temp_canvas(new_img);
var pattern = ctx.createPattern(tempCanvas, "no-repeat");
//var pattern = ctx.createPattern(new_img, "no-repeat");
ctx.save();
ctx.translate(imgX, imgY);
ctx.fillStyle = pattern;
ctx.fill();
ctx.restore();
}
$("#" + element.id).mousedown(function (e) {
handleMouseDown(e);
});
$("#" + element.id).mousemove(function (e) {
handleMouseMove(e);
});
$("#" + element.id).mouseup(function (e) {
handleMouseUp(e);
});
$("#" + element.id).mouseout(function (e) {
handleMouseOut(e);
});
}
else //You can ignore this - not relevant to the question
{
new_img = new Image();
new_img.onload = function() {
this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
this.height /= 3;
element.appendChild(new_img);
$(new_img).draggable({ containment: "parent" });
};
new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
}
console.log("new image: " + new_img.src);
}
I changed the code to:
...
ctx.fillStyle = "#BFBFBF";
ctx.fill();
var tempCanvas = photos_create_temp_canvas(new_img);
var pattern = ctx.createPattern(tempCanvas, "no-repeat");
ctx.save();
ctx.translate(imgX, imgY);
ctx.fillStyle = pattern;
ctx.fill();
ctx.restore();
...
And that part works but, now it is only letting me move the image from the bottom. (See image below)
You need to clear the canvas before redrawing:
function handleMouseMove(e)
{
...
var tempCanvas = photos_create_temp_canvas(new_img);
var pattern = ctx.createPattern(tempCanvas, "no-repeat");
//var pattern = ctx.createPattern(new_img, "no-repeat");
ctx.save();
ctx.translate(imgX, imgY);
ctx.fillStyle = pattern;
ctx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
ctx.fill();
ctx.restore();
}