I use this code from taking a screenshot & save it to pdf, I want to control the screenshot size like 400x700px.
<script type="text/javascript">
function genPDF() {
html2canvas(document.getElementById("all_content"), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG',20,20);
doc.save("Businesscard-<?php echo $sss_name; ?>.pdf");
}
});
}
</script>
Add height and width attribute to get you desired outcome :
function genPDF() {
html2canvas(document.getElementById("all_content"), {
onrendered: function (canvas) {
canvas.setAttribute('width',400); /*this->add*/
canvas.setAttribute('height',700); /*this->add*/
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG');
doc.save("Businesscard-<?php echo $sss_name; ?>.pdf");
}
});
}
Related
I'm trying to take a screen shot of a map that uses dash-leaflet. When the screen shot it taken with html2canvas, the overlay on the map is moved upward and to the left. I have been trying to correct this but the html2canvas documentation is pretty sparse, and I'm not sure what will correct the issue.
$(document).ready(function () {
$(document).on('click', "#btn-frame-download", function () {
var element = document.getElementById("graph-collection"); // global variable
if (element == null) {
element = document.getElementById("prob-graph"); // global variable
if (element == null) {
element = document.getElementById("was-graph"); // global variable
}
}
getCanvas(element);
});
});
function getCanvas(element) {
html2canvas(element, {
scrollX: 0,
scrollY: 0,
allowTaint: true,
useCORS: true,
async: false,
width: element.clientWidth,
height: element.clientHeight,
logging: true,
imageTimeout: 0,
}).then(function (canvas) {
saveAs(canvas.toDataURL(), 'image.png');
});
}
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
download-img.js [+]
Original
Output by html2canvas
Above you can see the how the screen looks in it's original format, and then what is output by html2canvas. Any tips would be greatly appreciated.
I am developping a game for Facebook instant games with Phaser 2 CE, and i don't like the loading progress shown at the starting point, how can i get rid of it ?
I am using the default example given in the Quick Start page
FBInstant.initializeAsync()
.then(function() {
var images = ['phaser2'];
for (var i=0; i < images.length; i++) {
var assetName = images[i];
var progress = ((i+1)/images.length) * 100;
game.load.image('./assets/' + assetName + '.png');
// Informs the SDK of loading progress
FBInstant.setLoadingProgress(progress);
}
});
You can try something like given in this example like the code bellow then create your game, i know it's not clean but it works
FBInstant.initializeAsync()
.then(function() {
FBInstant.setLoadingProgress(50);
FBInstant.setLoadingProgress(100);
});
I have tryed something interesting but it doesn't answers the question according to this example
var sprite;
var PixelW = window.innerWidth;
var PixelH = window.innerHeight;
var game = new Phaser.Game(PixelW, PixelH, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });
function preload() {
game.load.onLoadStart.add(loadStart, this);
game.load.onFileComplete.add(fileComplete, this);
startLoading();
}
function startLoading () {
game.load.image('logo1', 'assets/sprites/phaser1.png');
game.load.image('logo2', 'assets/sprites/phaser2.png');
game.load.image('dude', 'assets/sprites/phaser-dude.png');
game.load.image('ship', 'assets/sprites/phaser-ship.png');
game.load.image('mushroom', 'assets/sprites/mushroom.png');
game.load.image('mushroom2', 'assets/sprites/mushroom2.png');
game.load.image('diamond', 'assets/sprites/diamond.png');
game.load.image('bunny', 'assets/sprites/bunny.png');
game.load.start();
}
function create() {
game.stage.backgroundColor = 0x3b5998;
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'dude');
sprite.inputEnabled = true;
sprite.events.onInputDown.add(myHandler, this);
var text = game.add.text(10, 10, PixelW + " " + " " + PixelH, { font: "65px Arial", fill: "#ffff00", align: "center" });
}
function loadStart() {
}
// This callback is sent the following parameters:
function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) {
FBInstant.setLoadingProgress(progress);
//console.log(cacheKey + " " + progress);
}
function myHandler() {
sprite.anchor.setTo(0.5, 0.5);
sprite.x = Math.floor(Math.random() * PixelW);
sprite.y = Math.floor(Math.random() * PixelH);
}
function update() {
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>
<script src="phaser.min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
var p = 0;
FBInstant.initializeAsync()
.then(function() {
//FBInstant.setLoadingProgress(50);
//FBInstant.setLoadingProgress(100);
});
// Once all assets are loaded, tells the SDK
// to end loading view and start the game
FBInstant.startGameAsync()
.then(function() {
// Retrieving context and player information can only be done
// once startGameAsync() resolves
var contextId = FBInstant.context.getID();
var contextType = FBInstant.context.getType();
var playerName = FBInstant.player.getName();
var playerPic = FBInstant.player.getPhoto();
var playerId = FBInstant.player.getID();
// Once startGameAsync() resolves it also means the loading view has
// been removed and the user can see the game viewport
// game.start();
});
</script>
<div id="game"></div>
<script src="game.js" type="text/javascript"></script>
</body>
</html>
I use the methods below, I increase the loading percent after each file is loaded with Phaser. Also I include a try catch so that when testing local game play the game does not crash.
preload: function () {
try{
FBInstant.initializeAsync()
.then(function() {
});
}
catch(err) {
console.log('FB Instant Games Error: No Internet Connected');
}
this.load.image('gameItem1', 'assets/sprite/game_item1.png');
this.load.image('gameItem2', 'assets/sprite/game_item2.png');
}
And then...
startFacebookGame: function(){
try{
FBInstant.startGameAsync()
.then(function() {
// Retrieving context and player information can only be done
// once startGameAsync() resolves
var contextId = FBInstant.context.getID();
var contextType = FBInstant.context.getType();
var playerName = FBInstant.player.getName();
var playerPic = FBInstant.player.getPhoto();
var playerId = FBInstant.player.getID();
// Once startGameAsync() resolves it also means the loading view has
// been removed and the user can see the game viewport
});
}
catch(err) {
console.log('Analytics Connection Error');
}
},
fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
try{
FBInstant.setLoadingProgress(progress);
}
catch(err) {
console.log('FB Instant Games progress Failed: No Internet Connected.');
}
//console.log("Progress: " + progress);
},
Here's how I do it. You can build out from there.
function preload() {
// Load some assets
FBInstant.setLoadingProgress(100)
}
function create() {
FBInstant
.startGameAsync()
.then(() => {
// Here you can now get users name etc.
console.log(this)
})
}
FBInstant.initializeAsync()
.then(() => {
new Phaser.Game({
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
scene: {
preload,
create
}
})
})
I have a div that i want to screenshot and save,
here is my code
function _download(uri, filename)
{
var el = $('.sf-download-button');
if (el.length)
{
var link = document.createElement('a');
if (typeof link.download === 'string')
{
link.href = uri;
link.download = filename;
document.body.appendChild(link);
//simulate click // this causes page to download an empty html file not sure why
link.click();
//remove the link when done
document.body.removeChild(link);
}
else
{
window.open(uri);
}
}
}
function _save()
{
window.takeScreenShot = function ()
{
var a =document.getElementById("my-div");
html2canvas(document.getElementById("the-div-that-i-want-to-screenshot"), {
onrendered: function (canvas)
{
document.body.appendChild(canvas);
a.append(canvas);
},
width: 220,
height: 310
});
};
$("#btnSave2").click(function ()
{
html2canvas(document.getElementById("data"), {
onrendered: function (canvas)
{
_download_card(canvas.toDataURL(), 'save.png');
}
});
});
}
This is the code i got it from web and added some of my own stuff.code was working i believe but right now, when I click on the button show me the image, it creates the image i can see it but it is just blank.
I tried every possible code combination from jsfiddle and all that and couldn't get anything different as a result.
What could be going wrong here?
I solved the problem by simply changing the browser,
It was not working with Chrome but works perfectly on Mozilla.
Also i changed the code to this,
$("#btnSave").click(function() {
html2canvas($("#card"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
Works perfect on Mozilla only.
I am new to html2canvas. So please don't mind if I am asking silly question. I can generate image using html2canvas.
My code:
$(document).ready(function() {
$('#save_image_locally').click(function(){
html2canvas($('#html-content-holder'), {
onrendered: function (canvas) {
var a = $("<a>").attr("href", canvas.toDataURL('image/png')) .attr("download", "download.png").appendTo("body");
a[0].click();
a.remove();
}
});
});
});
im using vimeo drop uploader on my site. i got the uploder from
https://github.com/websemantics/vimeo-upload
its working well when i drop the image. but i dont know how to on click to open uploder window..
the uploder dont have the file input its only have the div
this is html
<div class="progress">
<div id="progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%
</div>
</div>
<div id="drop_zone">Drop files here</div>
and they use this script
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
var accessToken = document.getElementById("accessToken").value;
var upgrade_to_1080 = document.getElementById("upgrade_to_1080").checked;
// Set Video Data
var videoName = document.getElementById("videoName").value;
var videoDescription = document.getElementById("videoDescription").value;
// Clear the results div
var node = document.getElementById('results');
while (node.hasChildNodes()) node.removeChild(node.firstChild);
// Rest the progress bar
updateProgress(0);
var uploader = new MediaUploader({
file: files[0],
token: accessToken,
upgrade_to_1080: upgrade_to_1080,
videoData: {
name: (videoName > '') ? videoName : 'Default name',
description: (videoDescription > '') ? videoDescription : 'Default description'
},
onError: function(data) {
var errorResponse = JSON.parse(data);
message = errorResponse.error;
var element = document.createElement("div");
element.setAttribute('class', "alert alert-danger");
element.appendChild(document.createTextNode(message));
document.getElementById('results1').appendChild(element);
},
onProgress: function(data) {
updateProgress(data.loaded / data.total);
},
onComplete: function(videoId) {
var url = "https://vimeo.com/"+videoId;
document.getElementById("video").value = url;
//var a = document.createElement('a');
// a.appendChild(document.createTextNode(url));
// a.setAttribute('href',url);
//
// var element = document.createElement("div");
// element.setAttribute('class', "alert alert-success");
// element.appendChild(a);
//
// document.getElementById('results').appendChild(element);
}
});
uploader.upload();
}
/**
* Dragover handler to set the drop effect.
*/
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
/**
* Wire up drag & drop listeners once page loads
*/
document.addEventListener('DOMContentLoaded', function () {
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
});
var elem = document.getElementById('drop_zone');
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
/**
* Updat progress bar.
*/
function updateProgress(progress) {
progress = Math.floor(progress * 100);
var element = document.getElementById('progress');
element.setAttribute('style', 'width:'+progress+'%');
element.innerHTML = progress+'%';
}
progress
</script>
Can you help me on this how to i upload an video on click..
Demo https://github.com/googledrive/cors-upload-sample
Thanks