I want to render 4k high res images using html2canvas but it not render.
please advise.
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
<div id="html-content-holder">
<img
width="400" height="auto"src="https://www.wallpaperup.com/uploads/wallpapers/2016/06/24/991808/9ab236cccae5470451c20329ca43ec6b-1000.jpg">
</div>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<br/>
<h3>Preview :</h3>
<div id="previewImage">
</div>
preview not working please advise.
thank you
Related
When I click the "click now" button nothing happens, I want it to open in a new tab. Code:
<button onclick="myFunction()">click to play</button>
<script>
var urlObj = new window.URL(window.location.href);
var url = "https://incognito42.herokuapp.com/src/gs/public/hexgl/";
if (url) {
var win;
document.querySelector('button').onclick = function()
I've tried rewriting it like this:
<html>
<body>
<button onclick="myFunction()">click to play</button>
<script>
function myFunction() {
var win = window.open(
"https://incognito42.herokuapp.com/src/gs/public/vex5/",
"DescriptiveWindowName",
"width=1920,height=1080,resizable,scrollbars=no,status=1"
);
myWindow.document.write('<html><head> <title>Sample</title><link rel="stylesheet" type="text/css" href="css/newsCSSWindow.css"></head><body>');
myWindow.document.write("Sample Window");
myWindow.document.write('</body></html>');
}
</script>
</body>
</html>
but then it doesn't open in a new tab with the URL shown as "about:blank", and just to be clear I want the URL bar to say "about:blank", but it displaying the link's contents shown on the page.
this page for reference
You can't.
While you could fix your trivial errors:
The URL you entered as the first argument to window.open isn't about:blank
You forgot the , after that first argument
You have var win and then myWindow.document.write
… the browser will change the displayed URL to reflect where the data from.
Browsers do not let webpages deceive users about the source of what they are looking at.
I suspect that you meant it if you do not write in the comment exactly what
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="myFunction()">click to play</button>
<script>
function myFunction(){
var urlObj = new window.URL(window.location.href);
var url = "https://incognito42.herokuapp.com/src/gs/public/hexgl/";
if (url) {
var win;
document.querySelector('button').onclick = window.open(url)}
}
</script>
</body>
</html>
Edited version
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="myFunction()">click to play</button>
<script>
var urlObj = new window.URL(window.location.href);
var url = "https://incognito42.herokuapp.com/src/gs/public/hexgl/";
if (url) {
var win;
document.querySelector('button').onclick = function() {
if (win) {
win.focus();
}
else {
win = window.open();
win.document.body.style.margin = '0'; //Set margin new blank window
win.document.body.style.height = '100vh'; //Set height new blank window
var iframe = win.document.createElement('iframe'); //Creates a frame for the game
iframe.style.border = 'none';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.margin = '0';
iframe.src = url;
win.document.body.appendChild(iframe); //add a frame to the window
}
};
}
</script>
</body>
</html>
I tried using the following code . Only the image's name which i selected was displayed. I want to display them one after the other
<div ng-app="MyApp" ng-controller="MyController">
<input type="file" onchange="angular.element(this).scope().SelectFile(event)" />
<hr />
<img ng-src="{{image.PreviewImage}}"
ng-show="image.PreviewImage != null" alt=""
ng-repeat="image in list" style="height:200px;width:200px" />
</div>
here is my angularjs code
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.list=[];
$scope.SelectFile = function (e) {
var reader = new FileReader();
reader.onload = function (e) {
$scope.image.PreviewImage = e.target.result;
$scope.list.push(e.target.result);
$scope.$apply();
};
reader.readAsDataURL(e.target.files[0]);
};
});
I am generating dynamic html element from angularjs controller.I have used $compile
to make ng-click work inside html element.But still it is not calling the function.
Here is my js
var accountApp = angular.module('accountApp', ['ngRoute']);
accountApp.config(['$compileProvider',function($compileProvider )
.controller('myController',function($scope,$compile)
{
var searchHTML = '<li><a href="javascript:void(0)" data-ng-
click="setMarkerToCenterA()">'+item.title+'</a></li>';
$compile(searchHTML)($scope);
$scope.setMarkerToCenterA = function() {
alert("this alert is not calling");
}
});
}]);
I have injected the dependencies also.Can anyone tell why ng-click is not calling function even though i am using $compile?
First you need an element where this li element will be located.
<div ng-controller="myController">
<ul id="list"></ul>
</div>
Then in your controller:
var element = angular.element("#list");
element.html($compile(html)($scope));
$scope.setMarkerToCenterA = function() {
alert("Here");
};
Probably you missed to parse the HTML string using angular.element(htmlString) which is then compiled.
var app = angular.module('stackoverflow', []);
app.controller('MainCtrl', function($scope, $compile, $sce) {
var searchHTML = 'hello';
var template = angular.element(searchHTML);
$compile(template)($scope);
angular.element(document.querySelector('#container')).append(template);
$scope.setMarkerToCenterA = function() {
alert("this alert is now calling");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="stackoverflow" ng-controller="MainCtrl">
<div id="container"></div>
</div>
I have a requirement that i need to read a excel file from any location and to render the data of the excel on the next html page.
I was able to render the excel data with multiple sheets on the same page but now I need to select the file on first page and render its data on the next html page.
Like this:
And on the next screen need to show excel data:
Here in the Sheet Name i need to provide the sheet names from excel and on selecting any sheet name that sheet data need to be loaded in the grid.
I have used two divs to divide the page vertically in two columns.
I was able to achieve this functionality on a single page but now I need to divide this code in multiple pages.
This is the plunker of the work done:
http://plnkr.co/edit/xHEtxtzKrEiKDTrqlafC?p=preview
This is my js code:
angular.module('app', ['ui.grid'])
.controller('MainCtrl', ['$scope', function($scope) {
var vm = this;
vm.gridOptions = {};
vm.reset = reset;
vm.selectedSheet = '';
vm.sheetIndex = 0;
function reset() {
vm.gridOptions.data = [];
vm.gridOptions.columnDefs = [];
vm.selectedSheet = '';
vm.sheetIndex = 0;
}
vm.readSheet = function() {
var workbook = XLSX.read(vm.data, {
type: 'binary'
});
var headerNames = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]], {
header: 1
})[0];
vm.sheetNames = workbook.SheetNames;
var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]);
vm.gridOptions.columnDefs = [];
headerNames.forEach(function(h) {
vm.gridOptions.columnDefs.push({
field: h
});
});
vm.gridOptions.data = data;
};
vm.onLoadData = function(data) {
vm.data = vm.data || data;
vm.readSheet();
};
vm.sheetChange = function() {
vm.sheetIndex = vm.sheetNames.indexOf(vm.selectedSheet);
vm.readSheet();
};
}])
.directive("fileread", [function() {
return {
scope: {
onLoadData: '&'
},
link: function($scope, $elm, $attrs) {
$elm.on('change', function(changeEvent) {
var reader = new FileReader();
reader.onload = function(evt) {
$scope.$apply(function() {
$scope.onLoadData({
data: evt.target.result
});
$elm.val(null);
});
};
reader.readAsBinaryString(changeEvent.target.files[0]);
});
}
}
}]);
HTML code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl as vm">
<button type="button" class="btn btn-success" ng-click="vm.reset()">Reset Grid</button>
<br />
<br />
<div id="grid1" ui-grid="vm.gridOptions" class="grid">
<div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
<div class="msg">
<div class="center">
<span class="muted">Select Spreadsheet File</span>
<br />
<input type="file" accept=".xls,.xlsx,.ods" multiple="true" fileread="" on-load-data="vm.onLoadData(data)"/>
</div>
</div>
</div>
<div>
<select ng-model="vm.selectedSheet" ng-options="names as names for names in vm.sheetNames"
ng-change="vm.sheetChange()"></select>
{{vm.selectedSheet}}
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I think i need to store this JSON somewhere, so that it can be used later in different pages.
Should I use service to achieve this functionality or any other approach need to be used please suggest.
I hope this might help!
You can just store the Json data in to any rootScope variable to use in another controllers.
For Example:
You have the following code;
vm.readSheet = function() {
var workbook = XLSX.read(vm.data, {
type: 'binary'
});
var headerNames = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]], {
header: 1
})[0];
vm.sheetNames = workbook.SheetNames;
var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]);
vm.gridOptions.columnDefs = [];
headerNames.forEach(function(h) {
vm.gridOptions.columnDefs.push({
field: h
});
});
vm.gridOptions.data = data;
};
in here
vm.gridOptions.data = data;
you can set and store data for later usage as an JSON Array;
$rootScope.gridOptionsData = data;
I'm trying to pass the message from comn.html window to comm.html window, but it doesn't pass
please tell me whether the code is correct or not. If not, kindly provide the exact code for that.
I want the code for passing message between windows not between iframes.
Code of comn.html:
<html>
<head>
<script>
window.onload = function()
{
var btn = document.getElementById('send');
btn.addEventListener('click', function sendMessage(e)
{
var string="Hi Adaptavant";
var new_win=window.open('comm.html');
new_win.postMessage(string,"*");
});
}
</script>
</head>
<body>
<button id="send" >Send Message</button>
</body>
</html>
Code of comm.html:
<html>
<head>
<title>postMessage</title>
<script type=text/javascript>
window.onload = function()
{
var msg = document.getElementById('message');
window.addEventListener("message",function receiveMessage(e) {
msg.innerHTML="msg received= " +e.data;
document.write("the message is " +msg);
}
</script>
</head>
<body>
<div id="message"></div>
</body>
</html>
If I run this program, my message isn't posting in another window.
What's the problem?
replace your script with this:
window.onload = function()
{
var msg = document.getElementById('message');
window.addEventListener('message', function(e) {
var message = e.data;
msg.innerHTML="msg received= " +e.data;
});
}
Let me know if it worked!