We Keep Coding

How to get data from canvas using canvas.toDataURL()?

I am using html2canvas and jsPDF for printing my html file.
when my html page has horizontal scroll at that time image is cutting i uses following code
var element = document.getElementsByClassName('ppm_portlet_data');
html2canvas(element[0]).then(function (canvas) {
var data = canvas.toDataURL('image/jpeg', 0.7);
console.log(data); //this data is base64 and it is cutting my image
);
The canvas's width and height is same as the element. But when i get it from canvas, it will be cut off. How to fix this?

HTML5 canvas get screenshot of a div is not working

I'm trying to capture a div into an image using html5 canvas. Where I've a background image of that div so when trying to download the image in jpeg it is download without the background image. I'm sure I've that image in my domain so no way to break the same origin rule
HTML
<div id="testdiv" style="background:(path/to/image) no-repat">
</div>
JS
$(document).ready(function() {
//var testdiv = document.getElementById("testdiv");
html2canvas($("#testdiv"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
Why it's now drawing the background image of the div on canvas?
Any help? Thanks

You have to set css height to your div#testdiv like :
<div id="testdiv" style="background:(path/to/image) no-repeat; height:700px"></div>

Crop image before sending as DataURL

I have a canvas that is edited by a user (some drag and drop stuff), and it has some instructions printed in text on it. I want to save the image without that text.
I am using KeneticJS. The size will always be the same and the text is at the bottom of the image, so I was thinking if I could just crop that out that would work fine. I am passing the image as a dataURL to my solution, is it possible to crop the image before sending it as a data url?
It would be great if I could just say dataURL.crop(height, width); or something.
Here is my code which, on button press, sends the image as a data url to my filemaker solution.
bGroup.on('click touchstart', function(){
stage.toDataURL({
callback: function(dataUrl) {
var myParam = encodeURIComponent(dataUrl.split(',').pop());
theURL = 'fmp://$/" & Get(FileName)& "?script=MoistureMap_Done&param=' + myParam;
window.location= theURL;
bDone.fill('green');
buttonLayer.draw();
}});
});

There's no direct way of clipping your text, but it's not difficult:
Create an image from the dataURL (or use the texted image if you still have access to it).
Create a new in-memory canvas: document.createElement('canvas');
Resize the canvas to your desired clipped size: canvas.width=10; canvas.height=10;
Draw the image from #1 onto the canvas: context.drawImage
The text at the bottom of the image will automatically be clipped since the in-memory canvas is smaller than the incoming image.
Pull the dataurl of the in-memory canvas: canvas.toDataURL

How can I restore a saved image of a canvas drawing into a new canvas instance?

I am using sketch.js http://intridea.github.io/sketch.js/ so users can create drawing in my app. Once they are finished drawing, and click save, I convert the drawing into a png image using this function:
convertCanvasToImage = (canvas) ->
image = new Image()
image.src = canvas.toDataURL("image/png")
image
And then I just append the image to the DOM.
But what if a user wants to edit the drawing afterwards? How can I take that image and add it to the canvas that sketch.js uses?
I tried the following with failed results. When you click the png image I run this code to try to append the image to canvas, but it does not seem to work at all. The canvas is in a modal and once it appears I run the following code to append the image to canvas, but no image appears.
template.$('#sketchModal').on 'shown.bs.modal', (e) ->
c = document.getElementById("sketchPad")
ctx = c.getContext("2d")
ctx.drawImage(e.target, 0, 0)

I haven't used sketch js before, but seeing this code I came with an idea
<div class="tools">
Marker
Eraser
</div>
<canvas id="tools_sketch" width="800" height="300" style="background: url(http://farm1.static.flickr.com/91/239595759_3c3626b24a_b.jpg) no-repeat center center;"></canvas>
<script type="text/javascript">
$(function() {
$('#tools_sketch').sketch({defaultColor: "#ff0"});
});
</script>
You don't want to append the image in canvas but rather add it as a background.
Try it and please inform me if it worked.

Saving Canvas with the background image

I have a HTML5 canvas element with a background image. User is allowed to draw on the image and then need to save the complete canvas element with the background. I'm using below code for saving part but it only gets the canvas drawing but not the background image. what could i do to get the background image also?
var canvas = document.getElementById('your_canvas');
var context = canvas.getContext('2d');
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
Update:
My HTML
<div name='coords1' class='canvas-area input-xxlarge' disabled
placeholder='Shape Coordinates' id='imgDiv'
data-image-url='BackGround.jpg'></div>
I have the above div in my HTML page. then i dynamically create the canvas and draw on it. It's a bit lengthy code.

Don't use image on the div, draw the image on the canvas ..
use the following code to draw image on canvas,
var img=new Image();
img.src=/*image src*/;
var ctx=canvas.getContext("2d");
img.onload=function()
{
ctx.drawImage(img,x,y,width,height);
}
After image drawing completion at img.onload callback , allow user to draw on canvas...
Now save the canvas drawing....

To Get the Canvas with backgound Image
context.globalCompositeOperation="destination-over";
drawImage(yourBackgroundImage,0,0);