Displaying transparent background in conversion from PNG to JPEG for jsPDF - javascript

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

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 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?

Canvas ToDataUrl to simple image

Is there any way I can transform the data that I receive via toDataURL() into a simple image ending in .jpg or .png without having to download it?
My problem is that the data I receive with toDataURL, despite visualising perfectly into html tags, doesn't work with a ThreeJS script I'm working on.
Here you can find of the generated image into an img src tag (there was too much text to link it here). If there was a way to just make all that text into a simple filename.png I'm sure it would fix most of my problems.
The image is currently being loaded to the OBJ using
child.material.map = new THREE.Texture(img);
Where "img" has been data straight from the canvas or the dataurl generated picture.
var img = c.toDataURL({
format: 'png',
width: 1024,
height: 1024
})
I also tried using "c" and "ctx", but neither worked.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

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 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-----------------------

Categories