I am trying to make work a button that would open a new window with the content of my canvas in it (a rendered image of the canvas).
Here's my JS code :
var canvas = document.getElementById("thecanvas");
var dataUrl = canvas.toDataURL();
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
function clickme() {
window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}
HTML code :
<input type="button" onclick="clickme()" value="OPEN"/>
<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">
But when I click on the "OPEN" button, nothing happens...but I really don't see why. I have looked on alot of sites for tutorials. I even copied and pasted some codes, but still nothing happens. Am I doing something wrong? Thank you!
First off, the order in which you execute your statements matters. You need to call toDataURL after you draw to the canvas, or the dataURL generated with not contain that content.
I'm not sure what your script tags are like, but here's a working example that does the event in a slightly more foolproof way: http://jsfiddle.net/b7G6J/
HTML:
<input id="thebutton" type="button" value="OPEN"/>
<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">
JS:
var canvas = document.getElementById("thecanvas");
var context = canvas.getContext("2d");
// First drawing commands
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
// Then toDataURL
var dataUrl = canvas.toDataURL();
var button = document.getElementById("thebutton");
button.onclick =function() {
window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}
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 am trying to have an image change when you put in a URL and click a button.
But i keep on getting this error:
[object%20HTMLInputElement]:1 GET file:///Users/asbrown/Desktop/MLforSite/[object%20HTMLInputElement] net::ERR_FILE_NOT_FOUND
Here is my code:
$(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function drawimg(image) {
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, 400, 300);
}
img = new Image();
img.onload = function() {
canvas.width = 400;
canvas.height = 300;
}
img.src = document.getElementById("newURL");
}); // end $(function(){});
body {
background-color: ivory;
}
canvas {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=100 height=100></canvas>
<form>
<fieldset>
<legend>Input Data for Training</legend>
<p>
<label>Image URL</label>
<input type="text" id="newURL" value="" />
<br>
</p>
<script>
var newURLF = document.getElementById("newURL").innerHTML;
</script>
<input type="button" value="Add to Training Data" onclick=drawimg(newURLF);/>
Does anyone know which part of my code is causing this error?
I think it has something to do with the way i used the drawImage() function but i don't know what I am doing wrong. Any help would be appreciated.
So there's alot going on here. I'll try and walk you through it.
The ctx.drawImage function can take several objects to draw an image. None of them are a URL however. We first have to create an image object, set the src to be the users supplied URL, then wait for it to load before drawing it on the canvas. (the onload function gets called after the image is finished loading. )
See this for more info in the canvas drawImage function:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
A couple of things to keep in mind.
You have to wait for the image to load before you can draw it on the canvas. This is what the image.onload is doing for us.
You don't need jQuery. I see you're using stuff like document.getElementById. that'll work without jQuery.
Hopefully this is helpful.
function loadImg() {
// setup canvas and 2d context
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// get the url entered by the human
var newURL = document.getElementById("newURL").value;
// create an image
var image = new Image();
// this gets run once the image loads
image.onload = function() {
ctx.drawImage(image, 0, 0, 300, 400, 0, 0, 100, 100);
}
// set the image source to the url entered by the user
image.src = newURL;
}
canvas {
border: 1px solid red;
}
<canvas id="canvas" width="100" height="100"></canvas>
<form>
<fieldset>
<legend>Input Data for Training</legend>
<p>
<label>Image URL</label>
<input type="text" id="newURL" value="" />
</p>
<input type="button" value="Load image" onclick="loadImg();" />
</fieldset>
</form>
You need to get the value from the input like this
var newURLF = document.getElementById("newURL").value;
I have created a HTML based webpage consisting of a form, some texts and a canvas. I am trying to print this page that includes the canvas on a piece of paper. But the problem is - the canvas can't be printed. I also used toDataURL() method to convert the canvas to an image before printing, but it still didn't work. Could anyone give me some clues?
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(0, 0, 150, 100);
var img = c.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
function printData(){
var divToPrint=document.getElementById("printTable");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('#printButton').on('click',function(){
printData();
});
<canvas id="myCanvas"></canvas>
<table id="printTable">
<button type="button" id="printButton" class="btn btn-info"> Print </i></button>
<tr><td>Data1 : </td><td >HTML</td></tr>
<tr><td>Data2 : </td><td >CSS</td></tr>
<tr><td>Image : </td><td >Wanna print the image here.</td></tr>
what you could do is try some of the other good answered solutions on other asked pages which is quite similar to what you are trying to archieve.
Try checking here:
Capture HTML Canvas as gif/jpg/png/pdf?
I'm trying to place the textarea content into canvas but getting undefined message instead on the canvas block. successfully loaded image on it but not textarea. i tried in many ways to solve this but could not solve. please help me. Thanks in Advance.
html code
<textarea>praise the lord</textarea>
<div > <button class="wrapper1" id="saveid" onclick="sharee(0)">SAVE </button> </div>
<img id="scream" src="a.jpg" alt="The Scream" width="70" height="70"><p>Canvas:</p>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
javascript code
function sharee() {
var val = document.getElementById("myCanvas");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
textArea = document.getElementsByTagName("textarea")[0],
ctx.font="30px Arial";
ctx.drawImage(img, 40, 40);
ctx.fillText(textarea, 40,60);
setTimeout(function(){
window.savephotoplugin(canvas,"image/png",device.version,function(val){
//returns you the saved path in val
alert("Photo Saved: " + val);
});
}, 0)
You are trying to draw the textarea element it self as text which won't work.
Try this modification:
ctx.fillText(textArea.value, 40, 60);
and I'm not sure if this is just a typo in the post, but this line needs to be:
var textArea = document.getElementsByTagName("textarea")[0]; //no comma at end
I am trying to draw a canvas created through javascript on another canvas. But it is not working for me,
Here is my code,
<!DOCTYPE HTML>
<html>
<head>
</script>
<script>
window.onload = function(){
var can1 = document.createElement('canvas');
can1.width = 150;
can1.height = 140;
can1.style.cssText = 'top:2px;left:2px;border:2px solid black;';
var ctx1 = can1.getContext('2d');
var img=new Image();
img.src="images/211.jpg"
ctx1.drawImage(img,0,0);
var can = document.getElementById("c");
var ctx = can.getContext('2d');
ctx.drawImage(can1,0,0);
var canvas = document.getElementById("c");
window.open(canvas.toDataURL());
}
</script>
</head>
<body >
<canvas id="c" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>
</body>
</html>
I think the problem was that, when you were trying to drawImage that image into the canvas, image was not ready. so if u do this it works perfectly:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var imageObj = new Image();
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
var dynamicCanvas = document.createElement("canvas");
var dynamicContext = dynamicCanvas.getContext("2d");
dynamicCanvas .height="400";
dynamicCanvas.width="578";
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
imageObj.onload = function() {
dynamicContext.drawImage(imageObj, 69, 50);
context=context.drawImage(dynamicCanvas,69,50);
window.open(canvas.toDataURL());
};
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
and you can adjust the height and width of the dynamic canvas.
if you remove that window.open statement, its perfect.
but there is a problem with canvas.toDataURL()
when you try to do canvas.toDataURL() for a local file, it gives a security error (if you inspect it through google chrome) i.e.
Uncaught Error: SECURITY_ERR: DOM Exception 18
you can know more about this error : here
(see if you are getting this error). anyways, the root cause is sorted out, and there's a new problem now altogether :D..anyways better luck!!
The problem with an incorrect image display using the original code of MJQ is that he doesn't stated the size of the second canvas directly through attributes - only through style. Thus browser created a canvas of default size (300x150 for FF) and then stretched it to 250x350.
So the following modification will solve the image display:
<canvas id="c" width="250" height="350" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>
Maybe this will help someone in the future.
what are you taking about? your code is working.
(If am getting your question correctly) I added following lines after
can1.style.cssText='border:2px solid black;';
:
var ctx1 = can1.getContext('2d');
ctx1.rect(50, 50, 500, 500);
ctx1.fillStyle = '#8ED6FF';
ctx1.fill();
and upon execution, i see a beautiful rectangle inside!!
are you using html5 supporting browser??