We Keep Coding

html2canvas missing image on transform scale

I'm using html2canvas 1.0.0-alpha.9, and using jsplumbtoolkit to display Layout. I want save html on screen layout to image pnj file. But I have an bug when zoom in, zoom out html.
My code like this:
function PreviewPrinter() {
$("#previewImage").html('');
var cvs = document.getElementById('jsPlumb_2_1');
html2canvas(cvs).then(function (canvas) {
var myImage = canvas.toDataURL("image/png");
$("#previewImage").html("<img src=" + myImage + ">");
});
ShowModal("printView");
}
But I have an error like below:
When I zoom in with transform: scale(0.306108); and drag 1 image out of position, this image will missing when I append to Canvas.
I have image example below, fist image I drag out of position.
Image I want to save file .PNJ
Image error when append to canvas, you can see the first image is missing

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 copy a hidden canvas object to image without a blurred image

I am rendering a QR code to a div, however the div is hidden. When I copy the canvas to an image with the correct size, the image is blurred.
var children = $("#trial").children();
var canvas = children[0];
var ctx = canvas.getContext('2d');
//ctx.scale(3,3);
var img = new Image();
img.width = "300";
img.src = canvas.toDataURL();
$("#imagetrial").html(img);
I have tried scaling it as in the commented code, but the raw image turns out small, and when stretching the image it is blurred. If the div is not hidden, the code works correctly, but I cannot show the canvas, I am only interested in the data url which is passed on to a pop up print page.
Does anyone know a way to adjust the canvas size in the hidden div so that it copies correctly?

You can set the width of a canvas (onscreen or offscreen) like this:
canvas.width = 300;
You may be running into some subpixel issues regardless of canvas and image size matching.
Every canvas applies anti aliasing that CANNOT be turned off if the image you're generating on the canvas contains graphical elements or images drawn at sub pixel coordinates.
See this article: http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation

I ended up hiding the div by placing it offscreen, then the canvas gets copied correctly.

Displaying transparent background in conversion from PNG to JPEG for jsPDF

I am using jsPDF to convert images within canvas to toDataURL(). Specifically I am dealing with PNG's that once converted to JPEG and saved to a PDF file using the jsPDF plugin. I recieve a black background. I know this has to do with the PNG being able to handle transparent backgrounds and JPEG unable to register that. I know there are work arounds by creating some sort of background to replace the black background already inserted within that newly created JPEG but I am not sure how I can accomplish this?
Suggestions, thoughts?
Heres what I am doing:
$(".email_button").click(function(){
// LOOP THROUGH EACH CANVAS SECTION AND STORE THE DATA INTO PDF FORM USING JSPDF CONVERT
var canvas = $(".ifp_container_printing_15 canvas").get();
var imgData = canvas[0].toDataURL('image/jpeg');
console.log(imgData);
var doc = new jsPDF();
doc.addImage(imgData, "JPEG", 60,50);
doc.output('dataurlnewwindow');
});

Try:
var canvas = $(".ifp_container_printing_15 canvas").get(0);
var imgData = canvas.toDataURL('image/jpeg');

How Do You Render a Portion of an SVG in Canvas?

Core Problem:
The goal is to render a portion of an SVG to a fixed size Canvas element on a web page.
My Attempted Solution:
Seeing as CanVG seems to be the most straight-forward way to render an SVG image in Canvas I figured I could leverage the viewBox attribute to crop the image prior to CanVG's rendering. I've been having trouble on this point.
The Question:
Provided an SVG image, how can one render a portion of that image to a Canvas element?

Create an offscreen canvas and render to it using CanVG:
var full = document.createElement('canvas');
full.width=800; full.height=600;
canvg(full, '<svg>…</svg>');
Copy a portion of this canvas-as-image to a region on another canvas using drawImage (see link for parameter details):
var ctx = myVisibleCanvas.getContext('2d');
ctx.drawImage(full,10,20,80,60,92,16,80,60);
Edit: However, the above is not necessary if you have access to the SVG source (either directly in JS or via an XMLHTTP request) and can modify the viewBox attribute before rendering. See this demo which shows an SVG file rendered directly to one canvas, and then changes the viewBox attribute and renders the clipped region to another canvas.

Which exactly is the problem you get?
The context.drawImage function has a nice cropping feature built in. Instead of the standard 3 parameters (image object, x position, y position) you just pass to it 9 parameters and it will crop the image. These are the parameters:
context.drawImage(
imageObject,
original image x crop position,
original image y crop position,
original image crop width,
original image crop height,
canvas image x crop position,
canvas image y crop position,
canvas image crop width,
canvas image crop height
)
I have no idea if this works with CanVG but, as long as you can pass an image object to the function drawImage(), you will be able to crop it as mentioned in the code.