I am using html2canvas and jsDoc. I am rendering my current component html to pdf.
But somehow color of other component is overlapping to the current component after I download the pdf. This is Angular component.
Screenshots :
Screenshot from application
Screenshot from pdf viewer (Sidebar visible):
3.Screenshot from pdf viewer (Sidebar hidden):
You can see the color is overlapping from submit button till end.
Code :
downloadPdf() {
html2canvas(document.querySelector(".main-content")).then(canvas => {
var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
var imgData = canvas.toDataURL("image/jpeg",1.0);
pdf.addImage(imgData, 0, 0, canvas.width, canvas.height);
pdf.save('image.pdf');
});
}
Any guess why that color is overlapping? Any other solution to render HTML to pdf?
maybe my answer help someone. I resolved similar issue by adding a scale property
html2canvas(document.querySelector('#preview_modal'), {
allowTaint: false,
useCORS: true,
scale: 2,
})
Related
I am trying to create a function in the Angular system which will produce an image of the map using html2canvas
The following is the current function:
window.emapComponent.service.getMap('mapApi').then((map) => {
html2canvas(document.getElementById("mapApi"), { useCORS: true }).then(function (canvas) {
canvas.screenshotDataURI = canvas.toDataURL("image/jpg", 0.5);
canvas.toBlob(function (blob) {
saveAs(blob, oRequest.fileName)
});
});
})
What happens is that in the system itself, as soon as I drag the map with the mouse, the photo comes out weird (file attached)-
I noticed in the elements of html that although I see the objects of the layers adjusted to the map, in practice the div itself is dragged from place to place and this is what I get in the picture
I would be happy to help with this
I am trying to draw a Markups in forge Viewer but it's working when loading extension
var extensionOptions = {
hideIssuesButton: false,
hideFieldIssuesButton: true,
};
// Use the `viewer` reference to call `loadExtension` with the extension name and the extension options:
viewer["3d"].loadExtension('Autodesk.BIM360.Extension.PushPin', extensionOptions).then(function (extension)
{
PushPinExtensionHandle = extension;
});
but draw Thickness and Font Size is very small.How to increases the size?
Please find the attachment for reference.
here are some properties which u can adjust to set the size and width of your Text
var textgeometry = new Three.TextGeometry(text,
Object.assign({}, {
font: fonts,
bevelEnabled: false,
curveSegments: 2,
bevelThickness: 0,
color: 0xFFA500,
bevelSize: 0.21,
height: 3,
size: 1
}));
here is the link for reference how u can add Text Geometry
TextGeometry
It looks to me the post is about how to set font size and freehand thickness of Markup in Forge Viewer. I am not sure why the code snippet is about loading Pushpin Extension.
anyway, let me try to answer the question of font size and freehand thickness.
Markup Core extension provides the parameter to set font style when you create text. The parameter is a json, in which font-size is one key. So to set font size, the code is like below:
markupExt.enterEditMode();
var text1= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:10,y:10}, {x:100,y:100},'My Test String Small', {"font-size":5})
text1.execute();
var text2= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:30,y:30}, {x:130,y:130},'My Test String Big', {"font-size":20})
text2.execute();
As to thickness, the other post tells now to set stroke width.
Autodesk Forge Viewer Markup Style Object
I'm trying to play videos (mp4) in an window loaded with Electron.
Weird thing : it works fine with only one video, with the others it shows a black screen. The only difference between all videos are their width and height (does that matter ?). Also, in a browser window all videos play just fine.
Here's the code that load windows in electron :
let mainWindow;
let playerWindow;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({
title: 'MasterGameApp',
x: 910,
y: 500,
width: 800,
height: 460,
show: true,
resizable: false,
transparent: false
});
playerWindow = new BrowserWindow({
title: 'playerView',
x: 2250,
y: 50,
width: 1005,
height: 540,
show: true,
transparent: false,
fullscreen : true
});
mainWindow.loadURL('http://localhost:8889');
mainWindow.setMenuBarVisibility(false);
mainWindow.setAutoHideMenuBar(true);
playerWindow.loadUrl('http://localhost:8889/playerView');
playerWindow.setMenuBarVisibility(false);
playerWindow.setAutoHideMenuBar(true);
mainWindow.on('closed', function() {
playerWindow.close();
playerWindow = null;
mainWindow = null;
});
});
The videos url are simply given to a video tag inside a JS script like this $('#someDiv').append('<video id=\'backgroundvid\' autoplay><source src=\''+ content +'\' type=\'video/mp4\'></video>');
I don't understand why the browser can play every video but the electron window can't ... Thank's in advance
Ummm hey. I just saw the beginning of your URL property for the video tag is out of the inverted commas.
What you have:
$('#someDiv').append('<video id=\'backgroundvid\' autoplay><source src=\''+ content +'\' type=\'video/mp4\'></video>');
What you should have:
$('#someDiv').append('<video id=\'backgroundvid\' autoplay><source src="\''+ content +'\' type=\'video/mp4\'"></video>');
Have you tried changing that?
Stay lit; keep doing Electron. I am a great fan of it and can see its potential for future desktop applications. 👍👍👍
NOTE: Also, I am not sure what your CORS settings are or anything, but if it it trying to load videos locally, it may not let you.
I have a big DIV at my html that I'm converting this using canvas (jspdf is doing this) taking a screenshot and putting the image ate the pdf.
My code is like this:
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(
$('#myElement'),
{
format:'png',
pagesplit: true
},
function(canvas) {
console.log(canvas)
$(window).scrollTop(scrollTop)
pdf.save(pdfName);
}
);
The problem is that when I use "pagesplit = true" JSPDF split the image in some pages, it's nice! But the image becomes stretched totally disfigured.
There is some way to avoid image get stretched when using pagesplit?
I'm having problems using the jQuery Fancy Zoom plugn.
In my page I have the following HTML snippet:
<a href="ProjectImage?ID=#img.ID&Full=true">
<img class="content-image zoom" alt="#img.Name" src="ProjectImage?ID=#img.ID"/>
</a>
On page ProjectImage have:
#{
if (Request["ID"].IsInt())
{
var imgID = Request["ID"].AsInt();
var full = (!string.IsNullOrEmpty(Request["Full"]) && Request["Full"].IsBool() && Request["Full"].AsBool());
//Data
var db = Database.Open("AMSDArquiteturaConnectionString");
var image = db.QuerySingle("select * from Images where [ID] = #0", imgID);
if (image.MimeType.StartsWith("image"))
{
Response.AddHeader("content-disposition", "inline; filename=" + image.Name);
}
else
{
Response.AddHeader("content-disposition", "attachment; filename=" + image.Name);
}
Response.ContentType = image.MimeType;
if (full)
{
Response.BinaryWrite((byte[])image.ImageFull);
}
else
{
Response.BinaryWrite((byte[])image.File);
}
}
}
Note that the same, the low image of the database once the user clicks on the image to show larger picture.
The problem is that this way the plugin does not work.
It simply displays the image in actual size on your browser and loads the whole page again.
If I put an image, it works normally.
I'm getting stuck. Thanks for the help.
Here are a few links from the plugin I used:
http://www.hardleers.org/multimedialab/js/demo.html
http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/
http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/
This is the javascript I use to configure the plugin
//Set Zoom
$.fn.fancyzoom.defaultsOptions.imgDir='../Images/';
$('.project-imagepreview a').fancyzoom({Speed:400, scaleImg: false, closeOnClick: true});
$('img.zoom').fancyzoom();
I guess your Javascript's 3rd line should be $('img.fanzyzoom').fancyzoom(); as given in the references.
In my case when zoom out the image, It show me picture with alot of meanless symbols.
can show up my image, but plugin can not zoom it. I had tried with fancyboxm lightbox, thickbox....
plugin still work fine if I replace url: web/images?id=..... with web/images/somepicture.png