getting html canvas image as javascript object - javascript

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.

Related

Load html5 canvas publish of animate cc multiple times

The publish output of Animate CC gives html file and js file. I want to draw the same drawing two times in the same canvas. From this example, i want to have output as
How can i change the javascript to achieve this without having two canvas tag? I want to have numerous instance of it in single canvas tag.
If you are trying to achieve the image above, you can simply create two instances of simple_canv class.
Try this:
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRootLeft = new lib.simple_canv();
exportRootRight = new lib.simple_canv();
exportRootRight.x = 555;
stage = new createjs.Stage(canvas);
stage.addChild(exportRootLeft, exportRootRight);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
init_app()
}
Also, remember to increase the width of your canvas.
Is this what you are looking for?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
var ctx2 = canvas.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(0,0,50,50);
ctx2.fillStyle = "blue";
ctx2.fillRect(50,0,50,50);
</script>
</body>
</html>
You can then change what you render.

How to draw an image over another image using canvas

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);
});
});

Draw Image on canvas on button click not working

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

canvas.toblob fails when a patterned fill is used

I've been trying to find a method to save the canvas to file. My image is too large to use dataToUrl, so I have been trying various toblob methods. It seems that when a patterned fill is used, toblob does not work. Would anyone be able to to me if it is possible for this to work or if there is another way to accomplish this? Thanks
jfiddle example
<!DOCTYPE html>
<html>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script src="jquery.min.js"></script>
<script src="canvas-to-blob.js"/></script>
<script src="FileSaver.js-master\FileSaver.js"></script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var img = new Image();
img.src = "http://www.w3schools.com/tags/img_lamp.jpg";
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
//Works with color, but not with pattern
ctx.fillStyle = pat;
//ctx.fillStyle = 'blue';
ctx.fill();
try {
var isFileSaverSupported = !! new Blob();
} catch (e) {
alert(e);
}
alert("toBlob");
c.toBlob(function (blob) {
alert("success");
saveAs(blob, "TruVue.png");
});
</script>
</html>
The reason is due to CORS, images from other domains are restricted - you can show them on the canvas but you cannot extract their bitmap.
As toBlob is a bitmap extracting method like toDataURL or getImageData you won't be able to use these images.
There are a couple of work-arounds:
Upload the image to your own server and load it from there (same domain as you use for the page).
Modify the other server to include Access-Control-Allow-Origin headers (in this case it will probably not be do-able).
Use your own server as an image proxy
BTW: You should also use the image's onload event to be sure the image gets proper loaded before using the image:
var img = new Image();
img.onload = drawFunction;
img.src = "http://www.w3schools.com/tags/img_lamp.jpg";
function drawFunction() {
/// draw here
}

canvas to image shows as no image (blank)

I'm working on converting a canvas to an image using dataurl. I have the following code that outputs no error in console. Seems to work somewhat, but when i access the dataurl it shows a blank image.
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
var myImage = context.drawImage(imageObj, 0, 0);
var myImg = canvas.toDataURL("image/png");
document.getElementById("canvasimg").setAttribute("src", myImg);
};
imageObj.src = "http://img801.imageshack.us/img801/5641/3cc67ca1a74049ce99bc92b.png";
};
<canvas id="myCanvas" width="578" height="400"></canvas>
<img id="canvasimg" alt="" src="">
Look at what you are doing. You are drawing the image when the image loads, but you are converting it to a data url before the image has been drawn! Move that toDataURL call and the setAttribute call INSIDE the onload function.
Testing the code you have posted, I get a Security Error raised. Which is to be expected. The canvas has a clean-origin flag, and once that flag is false, you can't pull data out of it.
Here's a more detailed, related question
Documentation linked to in the answer

Categories