I am trying to run this code but on click nothing happens.
I think the main problem is the image loading, because when I try
to draw the image that is loaded from an tag it works.
<html>
<body>
<canvas id="myCanvas" width="445" height="312"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "~/Images/my-meme.jpg";
ctx.drawImage(img, 0, 0, img.width, img.height);
}
</script>
</body>
</html>
You'll need to wait for the image to load before using it. For example,
var img = new Image(); // Create new img element
img.addEventListener("load", function() {
// execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path
See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images
Related
I am working on plotting pinpoint images over another image using canvas. I am new to canvas; kindly guide me further on this.
I have taken an img element and copied it in a canvas. Now I am trying to put another image over that canvas object but it's not working.
Here's my Fiddle.
HTML:
<p>Image to use:</p>
<img id="scream" src="https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png" alt="The Scream" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button id="button1">Copy Imange</button></p>
<p><button id="button2">Draw OVer copied image</button></p>
Code:
$("#button1").click(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
});
$("#button1").click(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.drawImage("https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png",10,10);
});
There are a couple of issues. Firstly, you click events are both looking for the element $("#button1"). I'm assuming the second click event is supposed to be for $("#button2")
The next problem, in your second click event you are using drawImage from a URL to an image. You can't do that directly, you need to create a new image and set the source property like so:
var img2 = new Image();
img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
You also shouldn't set the canvas and context on every click, you only need to do that once. Here is the complete example (working example):
$(document).ready(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
var img2 = new Image();
img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
$("#button1").click(function(){
ctx.drawImage(img,10,10);
});
$("#button2").click(function(){
ctx.drawImage(img2,10,10);
});
});
I want to get html canvas image as javascript object. I looked samples from internet. But all samples are getting images from a source to canvas like this:
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
But my problem: There is an image on canvas element that created by pencil. I want to get that image as object and post to server. But I could not get.
have you tried canvas.toDataURL()?
more hardcore way might be canvas.getContext('2d').getImageData() would return ImageData object.
I am trying to show an image on a canvas at the top corner and the draw function is not working properly. What have I done wrong.
The above image is what I want to show on the screen.
<html>
<head>
<title></title>
</head>
<body>
<p><canvas id="canvas" style="border:1px solid black;" width="450" height="310"></canvas>
</body>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
draw();
function draw(){
var img = new Image();
img.src = "t.gif";
ctx.drawImage(img,0,0);
}
</script>
</html>
The problem is that you attempt to draw the image immediately, before the browser has finished downloading it.
Try this instead:
function draw(){
var img = new Image();
img.onload = function() {
ctx.drawImage(img,0,0);
};
img.src = "t.gif";
}
You should draw image after it is loaded
img.onload = function() {
// here...
};
I have a little canvas where random rectangles are drawn every time you click on it. On every new rectangle added, the whole canvas is saved to localStorage.
When the webpage is refreshed the last saved image from localStorage is loaded.
PROBLEM:
I have to refresh twice to get the last image/capture. Rrefreshing once gives me only a blank canvas. Why is this?
Index.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>
<canvas onclick="draw(this, event);" id="drawarea" height="240" width="320" style="border:1px solid black;">
</canvas>
</body>
</html>
script.js:
"use strict;"
window.onload=function(){
c=document.getElementById("drawarea");
if (c) initCanvas(c);
};
function initCanvas(canvas){
// Load last canvas
loadLastCanvas(canvas);
}
function draw(canvas, event){
// Draw at random place
ctx=c.getContext("2d");
ctx.fillStyle="#ff0000";
ctx.beginPath();
ctx.fillRect (250*Math.random()+1, 220*Math.random()+1, 40, 30);
ctx.closePath();
ctx.fill();
// Save canvas
saveCanvas(canvas);
}
function saveCanvas(c){
localStorage['lastImgURI']=c.toDataURL("image/png");
}
function loadLastCanvas(c){
if (!localStorage['lastImgURI']) return;
img = new Image();
img.src= localStorage['lastImgURI'];
ctx=c.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
}
The problem is that img.src = "" is an asynchronous call. So you have to add a callback to the onload event. See html5canvastutorials.com for more information.
function loadLastCanvas(c){
if (!localStorage['lastImgURI']) return;
img = new Image();
img.onload = function() {
ctx=c.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
};
img.src= localStorage['lastImgURI'];
}
I'm having a problem with retrieving the base64 version of an image displayed on a canvas. I've looked at the other questions but none of the solutions including canvas2image seem to work.
Here's my code:
<!DOCTYPE>
<html>
<head>
<style>#canvas {cursor: pointer;}</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'http://sstatic.net/stackoverflow/img/newsletter-ad.png';
can.onclick = function() {
ctx.translate(img.width-1, img.height-1);
ctx.rotate(Math.PI);
ctx.drawImage(img, 0, 0, img.width, img.height);
};
document.write(can.toDataURL()); //isn't writing the correct base64 image
</script>
</body>
</html>
Here's the test link: http://jsfiddle.net/mrchief/hgTdM/1/ thanks, Mrchief
What I need is the correct base64 output of the image in the canvas.
The problem is that it won't output the correct base64 version of the image.. But as you can see, the image inside the canvas is displayed without any problems.
I've tested it on chrome & firefox
Thanks very much..
Your document.write() call occurs immediately upon page load, before your img is loaded and drawn and before your onclick handler can ever run. You need to wait to generate the data URI until after everything has finished happening to the canvas.
Ignoring the onclick, here's something that writes out the data url after the image has loaded and been drawn to the canvas in a rotated fashion:
<!DOCTYPE html>
<html><head>
<title>Rotated Image Data URL</title>
<style type="text/css" media="screen">
canvas, textarea { display:block }
</style>
</head><body>
<canvas id="canvas"></canvas>
<textarea id="data" rows="20" cols="80"></textarea>
<img id="echo">
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
can.width = img.width;
can.height = img.height;
ctx.translate(img.width-1, img.height-1);
ctx.rotate(Math.PI);
ctx.drawImage(img, 0, 0, img.width, img.height);
var url = document.getElementById('data').value = can.toDataURL();
document.getElementById('echo').src = url;
}
img.src = 'gkhead.jpg';
</script>
</body></html>
You can see this demo in action here: http://phrogz.net/tmp/upside-down-image-url.html
Note that the image you load must be on the same domain as your script, or else you will not be allowed to create the data URL.