My team is currently working on a web application with angular 7 front end and .net core 2.1 back-end. One of tasks i need to do is to grab a screenshot and attach it to an email. The web application has an esri-map.
For the purposes of capturing the screenshot i am using html2canvas package. It works as expected except for the part that it doesn't capture the esri map content. It captures everything else except the esri-map.
For the html2canvas function call, i set the allowTaint property and useCORS property to true. I did some further research and i came across the proxy property for html2canvas. It made me think, that could be the reason why the map is not being generated. I cant seem to find any clear instructions on how to set up a proxy for arcgis. I was wondering if someone could help me with this.
any direction or help will be greatly appreciated.
following snippet is my html2canvas call.
html2canvas
html2canvas(document.getElementById('mapContainer'), { useCORS: true, logging: true, allowTaint: true }).then((canvas) => {
console.log("Document html2canvas");
console.log(document);
screenCapture = canvas.toDataURL();
]);
Update Jan 11 2018
I reached out to Esri regarding this and their response was , we dont support angular 7, we only support Javascript. I asked them , what if i use the print task instead of html2canvas .
This is my code snippet using print task. hope this might help someone.
This is a function i wrote in one of the services to capture the map. it seems to work fine. I don't know if there is any overhead of using the utility task url provided by arcgis or using your own server to render these screenshots. For some reason , it didn't work when i used the my servers print task utility URL.
note : in the below code snippet => is the arrow function =>
screenCapture(): Promise<any> {
return new Promise((resolve, reject) => {
loadModules(['esri/tasks/PrintTask', 'esri/tasks/support/PrintTemplate', 'esri/tasks/support/PrintParameters']).then(([PrintTask, PrintTemplate, PrintParameters]) => {
try {
var printTask = new PrintTask({
url: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task/',
updateDelay: '3000'
});
var template = new PrintTemplate({
layout: "map_only",
exportOptions: {
dpi: 96,
width: 1871,
height: 800
},
});
var params = new PrintParameters({
view: this.mapView,
template: template
});
printTask.execute(params).then(res => { console.log(res); resolve(res); });
}
catch (error) {
console.log(error);
reject(error);
}
});
});
} // end ofScreenCapture
You could try this library: https://github.com/WSDOT-GIS/arcgis-map-thumbnail-builder
I am not sure it is fully compatible with latest ArcGIS Javascript API but you probably can study the code sources to make it works with the version you are using.
Related
I am a newbie front-end web developer, mainly working with Html, CSS, JS. Lately, I discovered Framework7 and instantly like it.
Before I decided to write this issue here I have spent days browsing the official docs, Framework7 forum, and StackOverflow but I didn’t get the whole idea of how framework7 actually works.
I used to integrate JS code easily in my Html files and this simple task seems so complicated with framework 7.
I tried to add a JS code directly on the bottom of each page of my project, but the code seems to work only on the index.html. So I tried to add separated JS files and call it from index.html also no luck
I want to integrate the following simple code on every page of my projects:
document.addEventListener('deviceready', async () => {
await admob.start()
banner = new admob.BannerAd({
adUnitId: 'ca-app-pub-xxx/yyy',
})
await banner.show()
}, false)
document.addEventListener('deviceready', async () => {
await admob.start()
interstitial = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-xxx/yyy',
})
await interstitial.load()
await interstitial.show()
}, false)
Any help will be appreciated
use this plugin with cordova
https://github.com/floatinghotpot/cordova-admob-pro
// select the right Ad Id according to platform
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos
admobid = {
banner: 'ca-app-pub-xxx/xxx', // or DFP format "/6253334/dfp_example_ad"
interstitial: 'ca-app-pub-xxx/yyy'
};
} else { // for ios
admobid = {
banner: 'ca-app-pub-xxx/zzz', // or DFP format "/6253334/dfp_example_ad"
interstitial: 'ca-app-pub-xxx/kkk'
};
}
While trying to render a PDF, which gets served through our own API, the pdf.worker.js throws the following warning and the rendered PDF always keeps being completely white.
And I only see this (it's a wide PDF, but gets correctly rendered within the Demo):
Our Client application is served with angular, however I could not totally encapsulate the problem. With a simple and new angular application I was able to render a PDF File, served from our API but in my bigger client application the error above keeps occurring and I don't know why.
I'm using this Code to load the PDF, which inspired by this GitHub and this Blog Entry from Autodesk.
Autodesk.Viewing.Initializer({ env: 'Development', useADP: false }, () => {
const viewer = new Autodesk.Viewing.GuiViewer3D(
document.getElementById('forgeViewer'),
);
viewer.start();
const url =
'http://api.pdfFileToRender.pdf';
viewer.loadExtension('Autodesk.PDF').then(() => {
viewer.loadModel(
url,
{},
model => {
console.error('Success: ', model);
},
(errorCode, errorMessage, errorArgs) => {
console.error('Error Code: ', errorCode);
console.error('Error Msg: ', errorMessage);
console.error('Error Args: ', errorArgs);
},
);
viewer.loadExtension('Autodesk.Viewing.MarkupsCore');
viewer.loadExtension('Autodesk.Viewing.MarkupsGui');
});
});
The loadModel Function also calls the onSuccessCallback and I see "Success" in my Console.
For me it is not possible to integrate the PDF Extension into my Client App. Does anyone know a solution or have a hint for this, I gladly appreciate it.
It is also important for me, that the PDFs are rendered locally and are not uploaded to any Forge API.
For serving the Client Application I'm using Angular 11.2.7 and Typescript 4.1.5. I'm loading the ForgeViewer with the Version 7.36.0 but the Problem occurs also with other Versions.
For anyone interested, I could figure it out. Our own application was defining array prototype functions. However this is a problem for pdf.js which get's used by the PDF Extension from Forge.
The root problem was by defining array prototype functions like this:
Array.prototype.myFunction = function(...) {...}
We had to either exclude our own array functions or write it that way:
Object.defineProperty(Array.prototype, 'myFunction', {value: function(...) {...})
So, if you application defines array prototype function, use Object.defineProperty or don't use them at all. This seems to solve the Issue. Cheers.
I am using node-webshot utility to capture screenshot of an angularJS based website.
I have the following code which is partially working.
const webshot = require('webshot');
var options = {
streamType: 'png',
windowSize: {
width: 2048,
height: 2048
},
shotSize: {
width: 'all',
height: 'all'
}
};
webshot('URL here', 'image.png', options, function(err) {
if(err){
console.log("An error ocurred ", err);
}
else{
console.log("Job done mate :)")
}
});
It works fine for simple websites like google.com e.t.c, but the only problem is that the angular js website i am trying to fetch information from loads the default page first, then loads some additional bits (Forms, UI stuff) e.t.c after few seconds since it makes some http calls in the background.
I have tried using renderDelay property and set it to a large value. it does wait for that time, but still image is just a blank image.
As per their doucmentation set this
takeShotOnCallback false Wait for the web page to signal to webshot
when to take the photo using window.callPhantom('takeShot');
Now i can put this takeShotOnCallback in my properties above, but in the angular app, when i try to write this window.callPhantom, it gives me the error that method doesn't exist.
So how should i use this?
Another broader question is, does Node webshot is the right tool to capture screenshot for Angular 6 website. Or should i look for some other solution.
I'm looking for a simple solution to record audio file and upload it to s3.
My web searches come up to find:
WebRTC-Experiment which is the most popuplar solution i could find.
it also have a working example in the following link : https://www.webrtc-experiment.com/RecordRTC/
I also found ngCamRecorder which wasn't supported by firefox yet.
I'm looking for a simple solution + working example, and suggestion.
Which solution is most popuplar to use with AngularJS?
if you can provide your own example or link to a working example that i can use.
if you also used S3 i would like to know how you can push the file to S3, and get the link to the controller.
The solution i found, throw error, and include a working example without the code itself explained.
I also would like to know how to push it to s3.
This is the code i implemented from the example:
$scope.start_recording = function()
{
navigator.getUserMedia(session, function (mediaStream) {
window.recordRTC = RecordRTC(MediaStream);
recordRTC.startRecording();
}, function(error){console.log(error)});
};
$scope.stop_recording = function()
{
navigator.getUserMedia({audio: true}, function(mediaStream) {
window.recordRTC = RecordRTC(MediaStream);
recordRTC.startRecording();
});
};
It simply throw an error: undefined is not a function on recordrtc.js line 641
if(!mediaStream.getAudioTracks().length) throw 'Your stream has no audio tracks.';
obviously mediaStrem is null.
Thanks.
There's an AngularJS wrapper for this, it's a simple directive that supports HTML5 (RecorderJS), Cordova Media and Flash.
Usage is straightforward
<ng-audio-recorder audio-model="someModel" auto-start="false">
<!-- controls -->
<button ng-click='recorder.startRecording()'>Start</button>
<button ng-click='recorder.stopRecording()'>Stop</button>
</ng-audio-recorder>
You can see the full usage here:
https://github.com/logbon72/angular-recorder
I got the same issue and figured it out. The function argument in the success function of navigation.getUserMedia() is supposed to be "MediaStream" instead of "mediaStream".
I am using JSQRCode JS library to decode QR codes.
I found that it works just fine if I take pictures of the QR code from really close.
If I take the picture from a bit farther it is not able to decode the code.
NOTE: The code-decoding library is used within a Sencha Touch 2 app. The picture is taken using the Ext.device.Camera API that gives access to the phone camera.
Has anybody had similar problems?
Any possible solution or alternative way to reach the goal (taking picture + QR decoding)?
Any suggestion/comment is very appreciated!
Thank you very much!
Here is the code I'm running:
Ext.device.Camera.capture({
success: function(fileURI) {
// reassigning for test purposes
//fileURI = './resources/images/qrTemp.png';
console.log('Camera Success');
var imageView = Ext.getCmp('cameraImg');
imageView.setSrc(fileURI);
qrcode.decode(fileURI);
},
failure: function() {
console.log('Camera failure');
},
quality: 100,
source: 'camera'
}, /*scope*/ this, /*destination*/ 'file', /*encoding*/ 'png');
...
qrcode.callback = function(data){
window.alert('QRCode callback: '+ data);
};
UPDATE: just found out the problem is that the camera API from sencha touch is returning a very small image (although supposed to return a bigger one), so the code reader lib is not able to decode!
Anyone has faced this Sencha Touch problem?