Capture Google map using html2canvas - c#

I am using html2canvas to capture google map image on the click of a button.
There are lot of codes for this but I am not successful in getting an image,all I get is blank image with google icons like street view and sign in image without rendering map(just a grey background) .I used proxy for c# and here is my code. Can you guys tell me what the problem is?
$('#btn_capture').click(function ()
{
html2canvas($('#map-canvas'), {
logging: true, //Enable log (use Web Console for get Errors and Warnings)
proxy: "html2canvasproxy.ashx",
// useCORS: true,
onrendered: function (canvas) {
var img = new Image();
img.onload = function () {
img.onload = null;
document.body.appendChild(img);
};
img.onerror = function () {
img.onerror = null;
if (window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
}
else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
});

Related

Xamarin iOS post image to Instagram

Goal: Using an iOS native method, push a user made picture onto their Instagram feed in C#.
public bool ShareImage(byte[] imageByte)
{
bool result = false;
//string fileName = "xxx.png";
//string path = Path.Combine(FileSystem.CacheDirectory, fileName);
//File.WriteAllBytes(path, imageByte);
NSData data = NSData.FromArray(imageByte);
UIImage image = UIImage.LoadFromData(data);
//NSUrl url = NSUrl.FromString($"instagram://library?AssetPath={path}"); // Only opens
NSUrl url = NSUrl.FromString($"instagram://library?LocalIdentifier={1}");
if (UIApplication.SharedApplication.CanOpenUrl(url))
{
UIApplication.SharedApplication.OpenUrl(url);
}
return result;
}
As far as I'm aware the way I have to do this is to save my image to the device and get a Local Identifier for this.
I have constructed this from the snippets of objective-c code I have seen. Sharing photos only works with the native app installed, as I have learnt from my trials to get the facebook module working.
Edit: Using PHAssetChangeRequest from the iOS Photos namespace does not work.
A collegue has pointed out to me about the possibility of saving then using a photo picker to get the PHAsset for the Local Identifier. But this is an extra step I do not want the users of the App to go through. Better to just remove Instagram support as I just can go through the generic share method as shown below. The disadvantage of this method is that the user has then to pick the medium to share over.
public async void ShareImage(byte[] imageByte)
{
string fileName = "xxx.png";
string path = Path.Combine(FileSystem.CacheDirectory, fileName);
File.WriteAllBytes(path, imageByte);
await Share.RequestAsync(
new ShareFileRequest()
{
File = new ShareFile(path),
Title = "xxx"
}
);
}
Edit 2
Tried a different way using UIDocumentInteractionController but it is showing nothing and not posting, it is not throwing any exceptions to give me any clues as to what I'm doing wrong.
public bool ShareImage(byte[] imageByte)
{
bool result = false;
string fileName = "xxx.igo";
string path = Path.Combine(FileSystem.CacheDirectory, fileName);
File.WriteAllBytes(path, imageByte);
//string caption = "xxx";
string uti = "com.instagram.exclusivegram";
UIImageView view = new UIImageView();
//UIDocumentInteractionController controller = UIDocumentInteractionController.FromUrl(NSUrl.FromString(path));
UIDocumentInteractionController controller = new UIDocumentInteractionController
{
//controller.Url = NSUrl.FromString(path);
Url = NSUrl.FromFilename(path),
Uti = uti
};
//CoreGraphics.CGRect viewDimensions = new CoreGraphics.CGRect(0, 0, 200, 100);
_ = controller.PresentOpenInMenu(CoreGraphics.CGRect.Empty, view, true);
//_ = controller.PresentOpenInMenu(viewDimensions, view, true);
return result;
}
Edit 3
Using
UIView view = new UIImageView();
if (UIApplication.SharedApplication.KeyWindow.RootViewController is UIViewController uiController && uiController.View != null)
{
view = uiController.View;
}
I was able to get the possible share options to show. I was logged in to Instagram using the native App, but the post did not show.
Change
Url = NSUrl.FromFilename(path)
to
Url = new NSUrl(path,false)
The second way is pointing to the correct file path not the file name .
Change
controller.PresentOpenInMenu(CoreGraphics.CGRect.Empty, view, true);
to
controller.PresentOptionsMenu(UIScreen.MainScreen.Bounds, (UIApplication.SharedApplication.Delegate as AppDelegate).Window, true);
Show UIDocumentInteractionController inside current Window and set the proper frame.

Cannot find name 'screenShotUtils'

import {
browser,
Config
} from 'protractor';
//import {browser, element, By, by, protractor, ElementFinder, ExpectedConditions, WebElement, Key } from "#syncfusion/ej2-base/e2e/index"
var fs = require('fs')
describe("protractor screenshot", () => {
browser.manage().window().setPosition(0, 0);
it("Demo", async (done) => {
browser.get("file:///D:/New%20folder/ej2-documenteditor-e2e/demos/CR_Issues/samples/height/image.html");
browser.sleep(2000);
function writeScreenShot(data: string, filename: string) {
var stream = fs.createWriteStream(filename);
stream.write(new Buffer(data, 'base64'));
stream.end();
}
browser.executeScript('window.scrollTo(0,document.body.scrollHeight)');
screenShotUtils.takeScreenshot({
saveTo: "fullpageScreenshot.png"
})
});
});
Im getting [Cannot find name 'screenShotUtils'.]this error comes after importing in protractor .js.I have to take screenshot of the image in the website and compare with the already present image using protractor
in your code you have no module or object called screenShotUtils , you should be trying something like:
https://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.takeScreenshot
function writeScreenShot(data, filename) {
var stream = fs.createWriteStream(filename);
stream.write(new Buffer(data, 'base64'));
stream.end();
}
var foo = element(by.id('foo'));
//of element
foo.takeScreenshot().then((png) => {
writeScreenShot(png, 'foo.png');
});
//of entire page in viewport
browser.takeScreenshot().then((png) => {
writeScreenShot(png, 'foo.png');
});

Blank PDF being generated from ActiveReports/WebAPI

On a project I am working on, I'm building a feature that lets users generate a report - in my case, it will go on an envelope - on-demand from information stored in our database. The problem I'm trying to solve, is that a blank PDF is being generated.
I've tried some sanity checks. First I set a breakpoint in Visual Studio and ensured that the models being passed to the report had fixed data; the reports were blank. Next, I tried including a static label that's not tied to any data, to determine if it's a report data-binding issue - the static label is not appearing in the generated report either.
More stymying, is that I've used similar code in the past without issue. I have no idea why a blank PDF file would be generated in this case.
I've read the 'Similar Questions' provided by StackOverflow, specifically this question from one year ago, but it had no answers, and thus nothing to learn from it. I've also tried the requisite Google searches, but found nothing relevant.
The only thing I cannot provide is the actual ActiveReport itself. I've checked this for Silly Programmer Errors™ like having everything hidden, or transparent labels, or similar silly things. Unfortunately, I've made no such errors.
Report Code:
public partial class EnvelopeReport : SectionReport
{
public EnvelopeReport()
{
InitializeComponent();
}
internal void RunReport(IEnumerable<PrintedAddress> model)
{
if (model != null)
{
DataSource = model;
}
Run();
}
private void OnReportStart(object sender, EventArgs e)
{
Document.Printer.PrinterName = string.Empty;
PageSettings.PaperKind = PaperKind.Number10Envelope;
PageSettings.Margins.Top = 0.25f;
PageSettings.Margins.Left = 0.5f;
PageSettings.Margins.Right = 0.5f;
PageSettings.Margins.Bottom = 0.25f;
}
}
Web API Controller Code:
[HttpGet]
public HttpResponseMessage EnvelopeReport(int addressId, string attentionTo, bool isConfidential)
{
Address address = AddressRepository.GetAddress(addressId, true);
List<PrintedAddress> models = new List<PrintedAddress>
{
new PrintedAddress(address, attentionTo, isConfidential)
};
var report = new EnvelopeReport();
report.RunReport(models);
var pdfExporter = new ActiveReportsPdfExporter();
var reportBytes = pdfExporter.ExportPdf(report);
var response = Request.CreateResponse(HttpStatusCode.OK);
response.Content = new ByteArrayContent(reportBytes, 0, reportBytes.Length);
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
FileName = "Envelope Report.pdf"
};
return response;
}
PDF Exporter:
public class ActiveReportsPdfExporter
{
private readonly PdfExport _pdfExport;
public ActiveReportsPdfExporter()
{
_pdfExport = new PdfExport();
}
public byte[] ExportPdf(SectionReport report)
{
using (var stream = new MemoryStream())
{
_pdfExport.Export(report.Document, stream);
return stream.ToArray();
}
}
public Stream ExportPdfToStream(SectionReport report)
{
var stream = new MemoryStream();
_pdfExport.Export(report.Document, stream);
return stream;
}
}
Client Service (Angular):
(function () {
angular.module('app').factory('addressSvc', [
'$http', addressSvc
]);
function addressSvc($http) {
var service = {
printAddress: function(addressId, attentionTo, someFlag) {
var args = {
'addressId': thingId,
'attentionTo': attentionTo,
'isConfidential': isConfidential
};
return $http.get('/api/common/EnvelopeReport', { 'params': args });
}
};
return service;
}
})();
Client Controller (Angular):
(function() {
angular.module('app').controller('someCtrl', [
'$window', 'addressSvc', controller
]);
function controller($window, addressSvc) {
var vm = this;
vm.attentionTo = ''; // Bound to UI.
vm.isConfidential = ''; // Also bound to UI.
vm.address = {}; // Unimportant how we get this.
vm.printAddress = printAddress;
function printAddress() {
addressSvc.printAddress(vm.address.id, vm.attentionTo, vm.isConfidential)
.then(function(result) {
var file = new Blob([result], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
if(window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(file, 'Envelope.pdf');
} else {
$window.open(fileURL);
}
});
}
}
)();
Question: Why is this code generating an empty PDF? I've used the Report/API Controller structure successfully in the past to generate PDFs, but usually in the context of MVC, not Web API. Another potential point of failure is the client code - I've not previously passed reports between server and client this way.
So, it turns out my server-side code was completely sane. The Client code was off.
Instead of Blobbing the data returned from the server and all of that work, what I instead needed to do was build a URL...and call $window.open(url); This is because my server code as it stands will return the PDF file as-is.

C# google maps api multiple markers

I want to create a simple windows form C# app that shows a google map with multiple markers from a list of Lat Long.
My app can include a web browser container in it.
Is there any google api for that?
I use a google dll to calculate routes automatically using in the Nugget Console the following code:
PM> Install-Package GoogleMapsApi
Not sure if it will serve you, but it has all the features of Google Maps on it, just know how to use. Use the google documentation to learn how to use it well: https://developers.google.com/maps/
Edit 1:
I use this query that return all possible routes in the veriable routes.
Namespaces:
using GoogleMapsApi;
using GoogleMapsApi.Entities.Directions.Request;
var request = new DirectionsRequest
{
Origin = employeeAdress,
Destination = companyAdress,
TravelMode = TravelMode.Transit,
Alternatives = true,
ApiKey = key,
DepartureTime = DateTime.Now
};
var routes = GoogleMaps.Directions.Query(request);
But using a free key that google gives to you, you have only 2500 requests per day.
Here is some code for an HTML page to be used inconjunction with WebBrowser:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>GoogleMap</title>
<style type="text/css"> v\:* { behavior:url(#default#VML); } </style>
<script src="http://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxx&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//======== Local Google API data ===========================================================
var map = null;
var overlayvew = null;
var geocoder = null;
// ======== Local controls ======================================================
var body_info_label = null ;
var body_map = null ;
//======== Local functions and Events ============================================
function load()
{
body_info_label = document.getElementById("body_info_label");
body_map = document.getElementById("body_map") ;
MapLoad(900,700,"H") ;
}
function MapLoad(Width,Height,MapType)
{
try
{
ToGM_SetMapSize(Width,Height) ;
var mapOptions =
{
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add controls
mapTypeControl: false, scaleControl: true, streetViewControl:false,
overviewMapControl: false, overviewMapControlOptions: { opened: true }
};
map = new google.maps.Map(body_map,mapOptions);
}
catch (ex){ window.external.FromGM_Uninitialized() ; }
if (map != null)
{
geocoder = new google.maps.Geocoder();
ToGM_SetMapCenter(50.0,15.0,4); // Center and Zoom to Europe
ToGM_SetZoomControl (true ) ; // Create and Display zoom
ToGM_SetMapType (MapType) ; // Display according to map Type
ToGM_SetScaleControl(true ) ; // Create and Display scale
overlayview = new google.maps.OverlayView();
overlayview.draw = function() {};
overlayview.setMap(map);
// call to a C# procedure to indicate end of init
// window.external.FromGM_Initialized() ;
}
}
//======== Some functions that may be called from C# by .Net WebBrowser ================================
function ToGM_SetMapSize(Width,Height)
{
if (body_info_label!=null) Height=Height-15 ;
body_map.style.width =Width +"px" ;
body_map.style.height=Height+"px" ;
if (map!=null) google.maps.event.trigger(map, 'resize');
}
function ToGM_SetMapCenter(Lat,Lon,Zoom)
{ if (map!=null) {
if (Zoom==null) Zoom = map.getZoom() ;
var Center ;
if (Lat==null) Center = map.getCenter() ;
else Center = new google.maps.LatLng(Lat,Lon);
map.setCenter(Center) ;
map.setZoom(Zoom);
}}
function ToGM_SetZoomControl(On)
{
if (map!=null) map.setOptions({zoomControl:On}) ;
}
function ToGM_SetScaleControl(On)
{
if (map!=null) map.setOptions({scaleControl:On }) ;
}
function ToGM_SetMapType(MapType) // String MapType = "N"/"S"/"H"/"P"
{if (map!=null) {
if (MapType=="N") map.setMapTypeId(google.maps.MapTypeId.ROADMAP );
if (MapType=="S") map.setMapTypeId(google.maps.MapTypeId.SATELLITE );
if (MapType=="H") map.setMapTypeId(google.maps.MapTypeId.HYBRID );
if (MapType=="P") map.setMapTypeId(google.maps.MapTypeId.TERRAIN );
}}
</script>
</head>
<body
onload="load()" onunload="unload()">
<div id="body_map" style="width: 1000px; height: 600px"></div>
</body>
</html>

How to enable Google Transliteration for multiple dynamic Textboxes (ASP.Net)

Here's the sample (available everywhere) code for integrating Google Transliteration code in ASP.Net Pages.
But my question is, how to enable transliteration in TextBoxes which will be generated on runtime? This script demands the ID of the textbox for applying Transliteration. But my textboxes will be generated on runtime.
Need an alternative for this line of code:
control.makeTransliteratable(['transliterateTextarea']);
//Script Starts here
// Load the Google Transliterate API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
//End here
Use RegisterStartupScript. RegisterStartupScript will be be executed after page is loaded completely.
function EnableTransalation(ctrlId) {
//Script Starts here
// Load the Google Transliterate API
google.load('elements', '1', {
packages: 'transliteration'
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(["'" + ctrlId + "'"]);
}
google.setOnLoadCallback(onLoad);
//End here
}
In the code behind,
protected override void OnPreRender(EventArgs e)
{
Page.ClientScript.RegisterStartupScript(GetType(), "EnableTransalation", "EnableTransalation('" + ctrl.ClientID + "')", true);
}
First you have to set all text box class name as hindiFont.
Use this Code:
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage: [google.elements.transliteration.LanguageCode.ENGLISH],
destinationLanguage: [google.elements.transliteration.LanguageCode.HINDI],
transliterationEnabled: true,
shortcutKey: 'ctrl+g'
};
var control = new google.elements.transliteration.TransliterationControl(options);
$('.hindiFont').each(function(){
var id = this.id;
control.makeTransliteratable([id]);
})
}
google.setOnLoadCallback(onLoad);

Categories