I have converting from html to pdf by using html2canvas and jspdf.
I am using a3 format pdf but content width ix 1000px. so after 1000px, pdf shows black background.
canvas{
background: #fff !important;
background-color: #fff !important
margin: 0;
}
#cisForm {
padding: 10px;
width: 1000px;
margin: 0;
background: #fff !important;
}
cisForm is body
<script type="text/javascript">
window.onload = function() {
html2canvas(document.body).then(function(canvas) {
background:'#fff',
document.getElementById("cisForm").appendChild(canvas);
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
context.fillStyle="#FFFFFF";
l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l, "", "");
doc.addImage(canvas.toDataURL("image/jpeg"),"jpeg",0,0)
window.location=doc.output("datauristring")
});
}
</script>
There is no use for this code. This is converting from html to pdf.
and one more question.
Some limited contents only coming in pdf. Some contents are not coming.
Do we need to set no.of pages anywhere?
How to Remove black background from pdf
Try to set your body background-color to #FFFFFF.
This is because of the width you specified.try to adjust the width or specify in html2canvas options.
Check this out this worked for me
https://github.com/Wildhoney/Canvas-Background#canvas-background
import toDataURL from 'canvas-background';
const canvas = document.querySelector('canvas');
const data = toDataURL(canvas, '#ffffff', {
type: 'image/jpeg',
encoderOptions: 1.0
})
Related
I am using BalkanGraph plugin and I'm trying to align the first parent node of the orgchart to the top of the svg instead of the center of it.
I tried to set a negative "margin-top" and increases the height of the whole svg, but then the click goes with it, and it doesn't work well.
My only css is this:
#tree {
width: 100%;
height: 630px;
border: 1px solid lightgray;
background-color: #fff;
}
and the things I am using in Orgchart are these:
var chart = new OrgChart(document.getElementById("tree"), {
mouseScroolBehaviour: BALKANGraph.action.zoom,
nodeMouseClickBehaviour: BALKANGraph.action.none,
scaleInitial: BALKANGraph.match.boundary,
collapse: {
level: 2,
allChildren: true
},
});
Set align option to BALKANGraph.ORIENTATION
var chart = new OrgChart(document.getElementById("tree"), {
align: BALKANGraph.ORIENTATION,
...
});
I'm trying to make a circle out of images with different sizes and different shapes (some rectangle, some sqaure, some portrait, some landscape).
When I'm using: clip-path: circle(50% at 50% 50%); or border-radius: 50%;, it turns the image into a perfect circle, only if the image is square:
Is there a way to crop an image into a square and then use one of these methods to make it a perfect circle:
Using pure CSS withou using background-image (most images are given the background image from server side),
Keeping a 50% ratio - without losing aspect ratio - (both if border-radius or clip-path)(Images size may vary).
Here's a code snippet to show a square image and a rectangle image:
.clipped {
clip-path: circle(50% at 50% 50%);
}
Square<br>
<img src='http://i.imgur.com/d5byNNR.jpg' width="100" class='clipped' /><br><br>
Rectangle<br>
<img src='http://i.imgur.com/22W12EQ.jpg' width="100" class='clipped' />
You can use circle() but without the parameters:
.clipped {
clip-path: circle();
}
It appears to use the smaller side of your image as the circle's circumference.
Working sample here.
It works on Chrome and FireFox. IE and Edge still does not support clip-path
That's an another way to do it using pure CSS:
HTML
<div class="circular--portrait">
<img src='http://i.imgur.com/22W12EQ.jpg'/>
</div>
CSS
.circular--portrait {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
height: auto;
margin-top: -30px;
}
Code Snippet (with portrait and landscape examples)
Alright, took me a moment but this is what I came up with:
function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox, xOffSet, yOffSet) {
var result = { width: 0, height: 0, fScaleToTargetWidth: true };
if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
return result;
}
// scale to the target width
var scaleX1 = targetwidth;
var scaleY1 = (srcheight * targetwidth) / srcwidth;
// scale to the target height
var scaleX2 = (srcwidth * targetheight) / srcheight;
var scaleY2 = targetheight;
// now figure out which one we should use
var fScaleOnWidth = (scaleX2 > targetwidth);
if (fScaleOnWidth) {
fScaleOnWidth = fLetterBox;
}
else {
fScaleOnWidth = !fLetterBox;
}
if (fScaleOnWidth) {
result.width = Math.floor(scaleX1);
result.height = Math.floor(scaleY1);
result.fScaleToTargetWidth = true;
}
else {
result.width = Math.floor(scaleX2);
result.height = Math.floor(scaleY2);
result.fScaleToTargetWidth = false;
}
//result.targetleft = Math.floor((targetwidth - result.width) / 2);
//result.targettop = Math.floor((targetheight - result.height) / 2);
result.targetleft = Math.floor((targetwidth - result.width) / 2 - xOffSet);
result.targettop = Math.floor((targetheight - result.height) / 2 - yOffSet);
return result;
}
function OnImageLoad(evt, xOffSet = 0, yOffSet = 0) {
var img = evt.currentTarget;
// what's the size of this image and it's parent
var w = $(img).width();
var h = $(img).height();
var tw = $(img).parent().width();
var th = $(img).parent().height();
// compute the new size and offsets
var result = ScaleImage(w, h, tw, th, false, xOffSet, yOffSet);
// adjust the image coordinates and size
img.width = result.width;
img.height = result.height;
$(img).css("left", result.targetleft);
$(img).css("top", result.targettop);
}
.result {
width: 250px;
height: 250px;
border: thick solid #666666;
overflow: hidden;
position: relative;
border-radius: 50%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
No offset:
<div class='result'>
<img src="http://i.imgur.com/22W12EQ.jpg" style="position: absolute;" onload="OnImageLoad(event, 0, 0);"/>
</div>
Y offset:
<div class='result'>
<img src="http://i.imgur.com/22W12EQ.jpg" style="position: absolute;" onload="OnImageLoad(event, 0, 30);"/>
</div>
I took most of the work from this resource: https://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/ and I've adepted it to allow the use of Offsets so you can crop any image at the position you want.
How it works
You create a div of any size you want. It can be square, but if you want an egg-like result, that works as well (lol). Then insert the image of any unknown size inside it.
Change onload="OnImageLoad(event, 0, 30); with the offsets you want. Positive offsets for moving the image left or down, negative for up or right.
Note: I did use jQuery for this.
I'm very new to programming and am trying to make a project for class using html, canvas, and a css file. The concept is that there should be a title screen that appears in the canvas element that once you click will disappear and reveal a room where there are elements that you can hover your mouse over and get information.
I have the html, canvas, and css up to how I want it but whenever I try to put something in the canvas element it doesn't show up. Like, for the title screen I want to draw a colored box and put some text in it and then have it click away to reveal an image underneath. I used a drawCanvas but it will only show up if I put a gameLoop at the end. But when I try to add text, it disappears. Again, I'm really new to this and I'm sorry for my wall of text but any advice or suggestions would be really helpful. Here's my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title Page</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script src="js/modernizr.js"></script>
<script>
window.addEventListener("load",eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var width=1000;
var height=450;
function drawCanvas(){
context.fillStyle="teal";
context.fillRect(0,0,width,height);
setColor();
drawLines();
}
function gameLoop(){
requestAnimationFrame(gameLoop);
drawCanvas();
}
gameLoop();
}
</script>
</head>
<body>
<audio loop="loop" autoplay="autoplay" controls="controls">
<source src="themesong.mp3" type="audio/mpeg">
Your browser does not support the audio content.
</audio>
<!-- Canvas -->
<div id="canvas-container">
<canvas id="canvasOne" width="1000" height="450">
Your browser does not support canvas.
</canvas>
</div>
<!-- ^ End Canvas -->
</body>
</html>
And here's my CSS:
#canvasOne {
background-color: #cccccc;
border: 10px solid rgba(136, 128, 172, 0.9);
margin-left: 210px;
margin-right: auto;
margin-top: 130px;
#body {
background-image: url("mansion.jpg");
background-repeat: no-repeat;
}
Honestly, if someone could just help me put an image in the canvas and make it so that certain areas where the mouse hovers over a text box would appear, would be awesome. The idea is that it's a game where you "look" around the room with your mouse for clues. And once again, I'm very new to this so sorry if this is formatted weird or my question is too ridiculously long.
I'm not sure what exactly you want but i fixed the problem where the image is not coming up on the canvas.
The problem is that on your CSS you are coloring the background then you are also putting the image on it causing it to overlap.
Here is the CSS code that I have changed:
#canvasOne {
background-image: url("mansion.jpg");
background-repeat: no-repeat;
border: 10px solid rgba(136, 128, 172, 0.9);
margin-left: 210px;
margin-right: auto;
margin-top: 130px;
}
I dont know how to do the hover part but you should look into this
This is your main problem:
window.addEventListener("load",eventWindowLoaded, false);
The reason I say that is because you are calling the evenWindowLoaded function once -- when the page initially loads. Since this is the case, whatever state the drawLines() and other functions are in when the page loads for the first time, that will be draw on the canvas.
Instead you should try to use this:
var timer = setInterval(function() { eventWindowLoaded(); }, 100);
and then clear the canvas and re-draw it.
(this is for the hover effect)
that way, you can do calculate if the mouse's cursor is above a particular space on the canvas and then do whatever functions if it is... this isn't 100% going to work, but its a general idea of what you could do:
var mousePos;
var timer = setInterval(function() { eventWindowLoaded(); }, 100);
function eventWindowLoaded() {
context.clearRect(0,0,width,height);
for (var i=0; i<images.count; ++i) {
var img = images[i];
if (Math.Abs(mousePos.x - img.Pos().x)) <= img.width) {
if (Math.Abs(mousePos.y - img.Pos().y)) <= img.height) {
do_hover_event();
}
}
}
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function(evt) {
mousePos = getMousePos(canvas, evt);
}
Thats one thing -- here's another:
You are leaving the scope of the variable definition for the canvas/context var's, try this method for the canvas/context -- using 3 diffeerent separate functions and defining the width, height, theCanvas, and context all in the global scope
var width=1000;
var height=450;
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function canvasApp() {
if (!canvasSupport()) {
return;
}
gameLoop();
}
function drawCanvas(){
context.fillStyle="teal";
context.fillRect(0,0,width,height);
setColor();
drawLines();
}
function gameLoop(){
requestAnimationFrame(gameLoop);
drawCanvas();
}
Below is the simple html file, contains an anchor, overlay by block element with certain style. After applying the styles, the link become non-clickable only in IE9. Style applied is to make the anchor muted but allow users to click, if needed. Tried different options by using Jquery, didn't worked out. Any hack for this in html/css?
<!DOCTYPE html>
<html>
<head>
<title>Trial</title>
<style>
.overlay {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,.4);
pointer-events: none;
}
</style>
</head>
<body>
<div class="overlay"></div>
ClickMe
</body>
</html>
The CSS property pointer-events is not supported in < IE11 (See: http://caniuse.com/#feat=pointer-events)
As a work-around you could use JavaScript to listen for a click on the overlay and then trigger the click on the link underneath if its under your cursor. Something like:
function simulateClick(el) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
};
function isOnTopOf(evt, el) {
return evt.clientX >= el.offsetLeft && evt.clientX <= el.offsetLeft+el.offsetWidth && evt.clientY >= el.offsetTop && evt.clientY <= el.offsetTop+el.offsetHeight;
};
var overlay = document.getElementById("overlay");
var clicker = document.getElementById("clicker");
overlay.addEventListener('click', function(evt) {
if(isOnTopOf(evt, clicker)){
simulateClick(clicker);
}
}, false);
http://jsfiddle.net/nxdm5x3u/
However if your entire reason for doing this is to make the link appear "muted" you could just use CSS to make it semi-transparent and not bother with the overlay:
a.muted {
opacity: 0.5;
filter: alpha(opacity=50);
}
I want to create Web pages that allow users to drag and drop images into boxes in various parts of the page, so that they can then print the pages with their images.
I want the image to automatically resize when it's dropped in the box. I combined some of the code at http://html5demos.com/file-api with some of the code at http://html5demos.com/file-api-simple to get something like I want.
In the current version of the code (below), the image width does not resize the first time you drop the image into the box, but it does the second time.
Any suggestions how I can get the image width to resize automatically the first time you drop the image into the box?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>HTML5 Test</title>
</head>
<body>
<header>
<h1>HTML5 Test 1</h1>
</header>
<style>
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
</style>
<article>
<div id="holder"></div>
<p id="status">File API & FileReader API not supported</p>
<p>Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file - without uploading the file to any servers.</p>
</article>
<script>
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.stopPropagation();
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.src = event.target.result;
// note: no onload required since we've got the dataurl...I think! :)
if (img.width > 300) { // holder width
img.width = 300;
}
holder.innerHTML = '';
holder.appendChild(img);
};
reader.readAsDataURL(file);
return false;
};
</script>
</body>
</html>
I found a simple answer that I think works really well for my needs, based on a bit of CSS in http://demos.hacks.mozilla.org/openweb/DnD/dropbox.css used for http://demos.hacks.mozilla.org/openweb/DnD/.
In the code I included in my question above, I added this to the CSS code:
#holder > * {
display: block;
margin: auto;
max-width: 300px;
max-height: 300px;
}
and I deleted this:
if (img.width > 300) { // holder width
img.width = 300;
}