How Print html5 canvas with it parent div - javascript

My web page has a canvas inside div. i need to print this div with canvas using javascript .
enter image description here

You need to convert your canvas to a normal image to achieve this.
Get the data URI containing a representation of the image using the canvas.toDataURL like this,
var canvasObj = document.getElementById("yourCanvasId");
var imgObj = canvasObj.toDataURL("image/png");
Then you can write the image object as,
document.write('<img src="'+imgObj+'"/>');
This will work fine while taking the printouts.
Hope this helps!.

You can html2Canvas it gives you a png of the visible part of your Website. You can try it via browser console.

Related

how to save pixijs content as image

Let's say I have a pixijs app like this
https://codesandbox.io/s/o3qfi
I need to save the contents rendered by pixijs in the canvas as a screenshot.
I tried accessing the canvas like
app.renderer.view.toDataURL("image/png", 1.0)
and also through
document.getElementsByTagName('canvas')[0].toDataURL("image/png", 1.0)
However both of them returns an empty transparent image, instead of the canvas content rendered by pixijs
You'll need to extract it from the renderer.
For example, if you want to print the stage:
let blob = app.renderer.plugins.extract.image(app.stage).src;
window.location.href = blob.replace("image/png", "image/octet-stream");
Will download the following image:

How to increase the size of the downloaded image from canvas with fabricjs?

I'm using the following to download my fabricjs canvas and it works great but I wondered how I might be able to make the downloaded image larger so that it's clearer when I print it? Thanks for any help in advance.
// Download as png
function download(url, name) {
// make the link. set the href and download. emulate dom click
$('<a>').attr({
href: url,
download: name
})[0].click();
}
function downloadFabric(canvas, name) {
// convert the canvas to a data url and download it.
download(canvas.toDataURL(), name + '.png');
}
<button onclick="downloadFabric(canvas,'save');">Save</button>
This wound up being similar to this post. From there I was able to work that adding {multiplier: 4} to canvas.toDataURL(); worked splendidly.
You can set the canvas width and height as bigger than the showing size.
<canvas width="2400" height="2400" style="width:600px;height:600px;"></canvas>
Because render png refers to canvas width and height.
FIDDLE(you can get 2400x2400 image from the fiddle)

Making images draggable to HTML5 Canvas, moving images out of canvas

I'm trying to make a custom avatar maker, where my users can drag & drop images to the position they want (clothes etc. I take the image urls from database based on what they own). Then they can save the look as png image to my site (using php). I have no experience on javascript/jquery but I don't think that this can be without them. So I've found amazing code for this from here:
http://www.fabiobiondi.com/blog/2012/10/export-and-save-a-screenshot-of-an-html5-canvas-using-php-jquery-and-easeljs/
But the images are already in the canvas and can't go outside of it, which is bad considering that someone could have 100 pieces of clothing and didn't want to display them all. Also I have to make custom code for each piece, which is also bad because not all users have the same images to drag.
Is there a way to put all images draggable (to the canvas), so I could easily add the image urls from my database as basic html/css? Is it possible that the images would be outside of the canvas first? Or should I create another canvas for the items users don't want?
the script in the article uses a static image because its goal is only explain how to export a canvas to bitmap : )
I have written another small article where I describe how to upload N images from your hard drive into a canvas ( using CreateJS ) so as you can see the process to load dynamic sources is not so hard.
http://www.fabiobiondi.com/blog/2012/10/upload-images-from-the-user-hard-driveto-an-html5-canvas-easel-js-application/
Anyway, if you need to load an image into a canvas you can simply use a syntax like this:
var img = new createjs.Bitmap('http://uri/image.jpg')
img.x = 50;
img.y = 50;
stage.addChild(img)
stage.update();
and if you need to know when an image is completely loaded you should listen for the onload event:
var image = new Image();
image.onload = onImageLoaded;
image.src = "http://uri/image.jpg";
function onImageLoaded (event) {
var img = new createjs.Bitmap(event.target)
img.x = 50;
img.y = 50;
stage.addChild(img)
stage.update();
}
hope it's useful

How to save just the image of the canvas and not all canvas

I have a canvas 800x600 for example and I use fabricjs to add one image (200 x 200).
I apply several filters on my image and I would like to save it, but for the moment, I save the canvas 800x600 and I would like just save my picture after effects.
Is it possible?
From the latest version (download and compile it from GitHub), and this one is what you want:
canvas.toDataURL(left, top, width, height);
Check the question fabric.js - create Image object from ImageData object of canvas API for kangax’s comment only.
You can use FabricJS's canvas.toDataURL method which works much like html's canvas.toDataURL
var dataURL = myFabricCanvas.toDataURL();
If you wanted your user to save their canvas to their local disk, you could do this:
Create an image from the canvas.
Open that image in a new browser window
Have the user right-click and save-as the image
Here's code:
var win=window.open();
win.document.write("<img src='"+myFabricCanvas.toDataURL()+"'/>");
Note: if your image is hosted on a different domain than your .html, you will get a CORS security error and canvas.toDataURL will fail.
Try this
<button class="btn btn-success" id="rasterize">Convert Image To PNG</button>
//************************canvas to png image**********
document.getElementById('rasterize').onclick = function() {
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
window.open(canvas.toDataURL('png'));
var gh=(canvas.toDataURL('png'));+
alert(gh);
}
};
//--------------end canvas to png image-----------------------

How to get image size dyamically w/ mutliple instances?

I am using a FileReader to populate my images.
// i.e. .... e.target.result
If i set an image element source like this:
pic_upload_area.src = some_image;
I can get its dimensions like this:
width = pic_upload_area.clientWidth;
And things work fine. However if I now reset it to a new image like this:
pic_upload_area.src = '';
pic_upload_area.src = new_image;
and once again get the image like this:
width = pic_upload_area.clientWidth;
I find that it still has the old image width, and the new image has been malformed to fit the old image's dimensions.
I find it strange that it works only on the first attempt. How can I get clientWidth to update when I update the .src attribute of the image?
The easiest way is to delete and recreate pic_upload_area. Once its dimensions are set, new image src will conform to the old dimensions.

Categories