i have created a javascript canvas in which when user types a text, it will print on the image. the code is below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
canvas {
height: 500px;
width: 500px;
}
</style>
<div class="container">
<div style="margin-top: 5%;" class="row">
<div class="col-md-6"><canvas id="imageCanvas"></canvas></div>
<div class="col-md-6"><input type="text" id="name" placeholder="Name" /></div>
</div>
</div>
<script type="text/javascript">
var text_title = "Heading";
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
// img.crossOrigin = "anonymous";
window.addEventListener('load', DrawPlaceholder)
function DrawPlaceholder() {
img.onload = function() {
DrawOverlay(img);
DrawText(text_title);
DynamicText(img)
};
img.src = 'card.png';
}
function DrawOverlay(img) {
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(230, 14, 14, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function DrawText(text) {
ctx.fillStyle = "black";
ctx.textBaseline = 'middle';
ctx.font = "50px 'Montserrat'";
ctx.fillText(text, 50, 50);
}
function DynamicText(img) {
document.getElementById('name').addEventListener('keyup', function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
DrawOverlay(img);
text_title = this.value;
DrawText(text_title);
});
}
</script>
everything is fine except the image. The image is not correctly coming in the canvas. Its being stretched or not getting its original size. i tried resizing the canvas and all. I want the original size of the image to appear as it is. Can anyone please tell me what should i do in my code to get the original size of the image. thanks in advance
Related
I am new to javascript and am modifying a javascript code which has draws dynamic text on image and user can upload it.
The image will be fixed, user can't upload his own image.
Whatever I do, I am not able to remove the "choose image to upload" option from this code. Can anyone please help me with this?
My code is below:
var text_title = "Heading";
var text_title1 = "Heading";
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = "anonymous";
window.addEventListener('load', DrawPlaceholder)
function DrawPlaceholder() {
img.onload = function() {
DrawOverlay(img);
DrawText();
DynamicText(img)
};
img.src = 'uploads/<?php echo $image["image"] ?>';
}
function DrawOverlay(img) {
ctx.drawImage(img, 0, 0);
ctx.fillStyle = 'rgba(230, 14, 14, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function DrawText() {
ctx.fillStyle = "black";
ctx.textBaseline = 'middle';
ctx.font = "50px 'Montserrat'";
ctx.fillText(text_title, 50, 50);
ctx.fillText(text_title1, 150, 250);
}
function DynamicText(img) {
document.getElementById('name').addEventListener('keyup', function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
DrawOverlay(img);
DrawText();
text_title = this.value;
ctx.fillText(text_title, 50, 50);
});
document.getElementById('name1').addEventListener('keyup', function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
DrawOverlay(img);
DrawText();
text_title1 = this.value;
ctx.fillText(text_title1, 150, 250);
});
}
function handleImage(e) {
var reader = new FileReader();
var img = "";
var src = "";
reader.onload = function(event) {
img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
img.src = event.target.result;
src = event.target.result;
canvas.classList.add("show");
DrawOverlay(img);
DrawText();
DynamicText(img);
}
reader.readAsDataURL(e.target.files[0]);
}
function convertToImage() {
window.open(canvas.toDataURL('png'));
}
document.getElementById('download').onclick = function download() {
convertToImage();
}
<input class="controls__input" type="file" id="imageLoader" name="imageLoader" />
<label class="controls__label" for="name">First, choose an image.</label>
Like this?
var text_title = "Heading";
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
// img.crossOrigin = "anonymous";
window.addEventListener('load', DrawPlaceholder)
function DrawPlaceholder() {
img.onload = function() {
DrawOverlay(img);
DrawText(text_title);
DynamicText(img)
};
img.src = 'https://via.placeholder.com/500x500';
}
function DrawOverlay(img) {
ctx.drawImage(img, 0, 0);
ctx.fillStyle = 'rgba(230, 14, 14, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function DrawText(text) {
ctx.fillStyle = "black";
ctx.textBaseline = 'middle';
ctx.font = "50px 'Montserrat'";
ctx.fillText(text, 50, 50);
}
function DynamicText(img) {
document.getElementById('name').addEventListener('keyup', function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
DrawOverlay(img);
text_title = this.value;
DrawText(text_title);
});
}
canvas {
height: 300px;
width: 500px;
}
<input type="text" id="name" value="John" /><br/>
<canvas id="imageCanvas"></canvas>
I have a multilayer canvas that I want to save locally with a button(it will eventually have to be saved on aws but for now I am trying to figure out how to do it locally). I want one png file of the entire canvas and not just one layer. How would I do this, I've tried a few tutorials but they didn't seem to work. I have just started using javascript and angularjs so bear with me
AngularJS/HTML
<div style="position: relative; border: 1px solid black;">
<canvas id="layer1" width="200" height="200" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="200" height="200" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<p><button onclick="body()">Body</button></p>
<p><button onclick="hairstyle1()">Hair style 1</button></p>
<p><button onclick="hairstyle2()">Hair style 2</button></p>
Javascript
function body() {
var canvas = document.getElementById('layer1');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
};
imageObj.src = 'body.png';
}
function hairstyle1() {
var canvas = document.getElementById('layer2');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 50, 7, imageObj.width, imageObj.height);
};
imageObj.src = 'hair1.png';
}
function hairstyle2() {
var canvas = document.getElementById('layer2');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 50, 7, imageObj.width, imageObj.height);
};
imageObj.src = 'hair2.png';
}
If the canvas's are the same size, you can use drawImage to draw each one on another canvas.
var newCanvas = document.createElement('canvas');
newCanvas.width = 200;
newCanvas.height = 200;
var newCtx = newCanvas.getContext('2d');
newCtx.drawImage(document.getElementById("layer1"), 0, 0);
newCtx.drawImage(document.getElementById("layer2"), 0, 0);
// convert to url
console.log(newCanvas.toDataURL());
Esentially, canvas's can be treated as image objects as well.
I've a <canvas> with an image already loaded and all the graphics coordinates needed for a crop (x, y, w, h) in an array.
What I'm trying to do is to crop the canvas directly, without a temporary other canvas to copy to/from (as suggested in other SO answers).
My idea is to:
1) Draw the selected area on the top-left corner of the canvas
2) Shrink the canvas size to the area
$('#edit').on("click", function() {
var img = $('#canvas');
var c = img[0];
var ctx = c.getContext("2d");
//var imageData = ctx.getImageData(0, 0, 100, 100);
ctx.drawImage(c, 0, 0, 100, 100, 0, 0, 100, 100);
c.width = 100;
c.height = 100;
});
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 350, 350);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="350" height="350"></canvas>
<input id="edit" type="button" value="Edit" />
Seems easy to me, but I'm missing something: when I execute, I get nothing https://jsfiddle.net/qg0znpu7/
What's wrong with my code? how can I fix it to obtain an in-place canvas crop?
Changing the width or height of a canvas will clear it. For that reason you will have to copy the data first.
You can use putImageData() for that:
$('#edit').on("click", function() {
var c = $('#canvas')[0];
var ctx = c.getContext("2d");
var imageData = ctx.getImageData(0, 0, 100, 100);
c.width = 100;
c.height = 100;
ctx.putImageData(imageData, 0, 0);
});
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 350, 350);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="350" height="350"></canvas>
<input id="edit" type="button" value="Edit" />
i want to move html canvas horizontally, then rotate it, and then again move it horizontally. problem is, that after i rotate it and want to move it again, rotation dissapear. what i am doing wrong ? thanks, my code is below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<style type="text/css">
#canvas {
width:400px;
height:400px;
border:1px solid red;
}
</style>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var counterx = 0;
var canvasWidth = 400;
var canvasHeight = 400;
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, counterx,0 ,69, 50);
};
imageObj.src = 'test.png';
function moveRight() {
ctx.save();
counterx += 5;
ctx.clearRect(0 ,0 ,canvasWidth, canvasHeight);
ctx.drawImage(imageObj, counterx,0 ,69, 50);
ctx.restore();
}
function rotate() {
ctx.save();
ctx.translate(counterx, 0);
ctx.rotate(Math.PI / 4);
ctx.clearRect(0 ,0 ,canvasWidth, canvasHeight);
ctx.drawImage(imageObj, counterx,0 ,69, 50);
ctx.restore();
}
</script>
<a onclick="moveRight(); return false;" href="#">move right</a>
<a onclick="rotate(); return false;" href="#">rotate</a>
</body>
</html>
I would recommend accumulating the values, then do an absolute transform only when needed. A little refactoring can also make it easier to track these changes, here that would be to use a common update method.
For example:
var rotation = 0;
var counterx = 0;
function moveRight() {
counterx += 5;
update();
}
function rotate() {
rotation += Math.PI / 4
update();
}
function update() {
ctx.clearRect(0 ,0 ,canvasWidth, canvasHeight);
ctx.translate(counterx, 0); // absolute translate
ctx.rotate(rotation); // absolute rotation
ctx.drawImage(imageObj, 0, 0, 69, 50); // we are already at counterx
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset all transformations
}
And if you want to rotate by image's center, just replace the drawImage line above with:
ctx.drawImage(imageObj, -69/2, -50/2, 69, 50);
Live demo
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var canvasWidth = 400;
var canvasHeight = 400;
var imageObj = new Image();
var rotation = 0;
var counterx = 0;
c.width = canvasWidth;
c.height = canvasHeight;
imageObj.onload = update;
imageObj.src = 'http://i.imgur.com/mP58PXJ.png';
function moveRight() {
counterx += 5;
update();
}
function rotate() {
rotation += Math.PI / 4
update();
}
function update() {
var iw = imageObj.width, ih = imageObj.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.translate(counterx, ih); // absolute translate
ctx.rotate(rotation); // absolute rotation
ctx.drawImage(imageObj, -iw*0.5, -ih*0.5); // we are already at counterx
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset all transformations
}
#canvas {
width: 400px;
height: 400px;
border: 1px solid red;
}
<canvas id="canvas"></canvas>
<a onclick="moveRight(); return false;" href="#">move right</a>
<a onclick="rotate(); return false;" href="#">rotate</a>
I have 2 images on canvas and i want to make imageObg to animate. Actually i want it to make a linear move to the right.I found a way to animate an object like a rectangle but i cant animate an image object that i use from another source.
Is there anyway that can i manage to do i? Does anyone knows?
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var imageObj2 = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 130);
};
imageObj2.onload = function() {
context.drawImage(imageObj2, 0, 0);
};
imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png'
imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg'
};
body {
background-color: black
}
<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1">
<canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
Just two things.
Set a periodically render routine using setInterval.
Set a move (or physics) routine, call it after each render.
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var imageObj2 = new Image();
imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png'
imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg'
window.setInterval(renderFrame, 50);
var ship = {
x: 69,
y: 130
};
function renderFrame() {
moveShip();
context.clearRect(0, 0, canvas.width, canvas.height);
if (imageObj.complete) {
context.drawImage(imageObj2, 0, 0);
}
if (imageObj.complete) {
context.drawImage(imageObj, ship.x, ship.y);
}
}
function moveShip() {
ship.x += 20;
if (ship.x > canvas.width) {
ship.x = 0 - imageObj.width;
ship.y = Math.random() * 250 + 50;
}
}
};
body {
background-color: black
}
<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1">
<canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
Just increase the x position of the image with a setInterval command.
var img = document.createElement("IMG");
var img.src = [Image Source];
var x = 0;
window.setInterval(function() {
x ++;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, x, 0);
}, 50);
Hope this helps.
Edit:
Here is a JSFiddle Example.