My Code is like this
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas>
<img id="canvasImg" onclick="myFunction()" alt="Right click to save me!">
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function myFunction() {
var c = document.getElementsByTagName("canvas");
// save canvas image as data url (png format by default)
var dataURL = c.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
}
</script>
</body>
</html>
When i click on canvasImg its throwing an error
Uncaught TypeError: Object #<NodeList> has no method 'toDataURL'
I have made a fiddle here
Can any one point out whats going wrong?
DEMO
document.getElementsByTagName returns array of elements objects, and no array objects have method toDataUrl
instead of this
var c = document.getElementsByTagName("canvas");
use
var c = document.getElementsByTagName("canvas")[0];
function myFunction() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = document.getElementById("canvasImg");
context.drawImage(img, 0, 0);
}
Related
I have forms with arbitrary numbers of canvases. Once one is filled out I would like to copy it to any other canvas that is interacted with.
I have currently
When one canvase is closed I save the canvas data
sourceCanvas = $(this).find('canvas')[0];
Then when the next one loads (they are in modals)
I try to populate it like this
var destCtx = $(this).find('canvas')[0].getContext('2d');
destCtx.drawImage(sourceCanvas, 0, 0);
I am getting this error
Uncaught
TypeError: Failed to execute 'drawImage' on
'CanvasRenderingContext2D': The provided value is not of type
'(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
Is ('canvas')[0] the wrong thing to grab? should I be getting something else in the canvas element?
Thanks!
When one canvase is closed I save the canvas data
sourceCanvas = $(this).find('canvas')[0];
I think that your code is not accessing the image data in the source canvas.
Call getImageData() on the context of the source canvas then get call putImageData() on the context of the destination canvas
.
Below is a simple example which copies the image data from canvas1 into both canvas1 (at a different location for illustration) and also into canvas2.
Also, check out this excellent text on HTML5 Canvas.
<html>
<body>
<canvas id="canvas1" width="300" height="150" style="border:1px solid #f00;">no canvas</canvas>
<canvas id="canvas2" width="300" height="150" style="border:1px solid #00f;">no canvas</canvas>
<script>
var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");
var ctx1 = c1.getContext("2d");
var ctx2 = c2.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(10, 10, 50, 50);
function copy() {
var imgData = ctx1.getImageData(10, 10, 50, 50);
ctx1.putImageData(imgData, 10, 70);
ctx2.putImageData(imgData, 10, 70);
}
</script>
<button onclick="copy()">Copy</button>
</body>
</html>
I'm trying to get the Base64/Data URL of a chosen image file in Javascript. The user basically selects an image via the File Input control and the Data URL is generated. However, I get this error:
Uncaught TypeError: Failed to execute 'drawImage' on
'CanvasRenderingContext2D': The provided value is not of type
'(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or
ImageBitmap)'
HTML:
<body>
<form id="form1">
<div>
<input type="file" id="imageinput" onchange="testit(event)" />
<canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas>
</div>
</form>
</body>
Javascript:
function testit(event) {
var myImage = URL.createObjectURL(event.target.files[0]);
var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
ctx.drawImage(myImage, 0, 0);
var mydataURL = myCanvas.toDataURL('image/jpg');
alert(mydataURL);
}
Why isn't this code working, guys?
You can not draw an image from url directly to canvas. You have to create a image element/object to do that.
var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img, 0, 0);
alert(myCanvas.toDataURL('image/jpeg'));
};
img.src = URL.createObjectURL(event.target.files[0]);
Here we have created a image object and set the src to user selected image url. After the image is loaded we are adding it to the canvas.
EDIT:
Here we have one more problem. Whatever the image size is, you will always get 300x300 cropped dataurl of the image because of the static canvas width and height. So we can set the width and height to the canvas dynamically after the image loaded. We can use console.log() instead of alert() so that you can open and see the image from your console in your browser itself.
myCanvas.width = img.width;
myCanvas.height = img.height;
Here is the final code:
var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
myCanvas.width = img.width;
myCanvas.height = img.height;
ctx.drawImage(img, 0, 0);
console.log(myCanvas.toDataURL('image/jpeg'));
};
img.src = URL.createObjectURL(event.target.files[0]);
Here is the fiddle (i have made the canvas visible so that you can see the whole image and width and height change in canvas):
UPDATE:
As #Kaiido mentioned, It will produce PNG image since the 'image/jpg' is not the mimetype. 'image/jpeg' is the mimetype for both JPG and JPEG images.
Updated Fiddle:
http://jsfiddle.net/k7moorthi/r8soo95p/4/
You're trying to draw an object URL to the canvas. you need to create an image in memory first
http://jsfiddle.net/zmtu6t6c/4/
var myImageUrl = URL.createObjectURL(event.target.files[0]);
var myImage = new Image();
myImage.src = myImageUrl;
myImage.onload = function(){
... then do the canvas stuff
}
I was trying to execute this code in webmatrix. But don't know why I'm not getting result. I'm getting original image but not in canvas. Also I'm new to webmatrix.
Here is my code:
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="happy.png" alt="The Scream" width="220" height="277">
<p>Canvas</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
</body>
</html>
This is not a problem concerning the Web Pages framework and WebMatrix, but the Canvas API.
Before to instantiate the drawImage() method the code must wait that the image is loaded. You can accomplish this by using the onload property of the image object as in the example that follows:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function () {
ctx.drawImage(img, 10, 10);
}
</script>
I'm trying to create a simple html 5 canvas however it looks as if my JavaScript is not returning the right thing:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<script>
var c = document.getElementById("myCanvas");
console.log(c);
// var ctx = c.getContext("2d");
// ctx.fillStyle = "#FF0000";
// ctx.fillRect(0,0,150,75);
</script>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</body>
</html>
My console log returns a null even though that element exists. I have checked and my browser does support 2d graphics and canvas.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
console.log(c);
</script>
NOTE: First you have to have DOM element in your script, unless you aren't aware of that DOM is already fully loaded. Nonetheless of DOM element position in your script you can write JavaScript as following:
window.onload = function(){
// here goes your code
};
Your dom(canvas) is not ready for your script, put your code inside window.onload
window.onload = function (){
//this scripts runs when your canvas is ready
var c = document.getElementById("myCanvas");
console.log(c);
}
It's because your canvas isn't in the DOM yet.
Wrap it in a window.onload
window.onload = function(){
var c = document.getElementById("myCanvas");
console.log(c);
}
i have a image and i draw that image on the canvas. now i want to change the source of the image and again draw the image in the canvas.
i have tried the below code and here is the jsfiddler. canvas's drawing is not changing.... what to do?
HTML
<button onclick="change_2_new_image();">change_image()</button>
<img id="test" src="http://static.clickbd.com/global/classified/item_img/374646_0_original.jpg" alt="error" title="This is an image" />
<canvas id="myCanvas" width="320px" height="275px"><canvas>
JS
var img;
$(function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
img = document.getElementById("test");
img.ready = function () {
alert("asasas");
};
ctx.drawImage(img, 0, 0);
});
function change_2_new_image() {
$('#test').attr("src", "http://upload.wikimedia.org/wikipedia/en/9/9a/Grameenphone_Logo.png");
img = document.getElementById("test");
ctx.drawImage(img, 0, 0);
}
Your issue is with variable scope. You can't access ctx from the function.
function change_2_new_image() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
$('#test').attr("src", "http://upload.wikimedia.org/wikipedia/en/9/9a/Grameenphone_Logo.png");
img = document.getElementById("test");
ctx.drawImage(img, 0, 0);
ctx.render()
}
The above should now work.
ctx is defined inside of your closure and not defined in change_2_new_image() that's why the error message ReferenceError: ctx is not defined is popping up in the console. After fixing that, you may also notice that the image at times, hasn't yet loaded. use jQuery's on('load', ... ) event. for more info, you can have a look at this thread: jQuery event for images loaded
Hope that helps!