I lost much time for find a solution but still nothing. I want get information from google maps and store screen of this map on image.
I try to combine pjscrape and html2canvas to render this map to image. My goal is to save screen map to image and get coordinates of road.
Maybe I chose bad approach to do this, maybe I try to reinvent wheel and it's ready module to this?
For example I want get this information from map:
http://www.mapmyride.com/fr/paris-ile-de-france/5-52km-road-cycling-on-09-09-13-route-286292763
But, I don't want use description on this site - need information only from map.
I try to load html2canvas in pjs:
require('./html2canvas');
pjs.config({
// options: 'stdout', 'file' (set in config.logFile) or 'none'
log: 'stdout',
// options: 'json' or 'csv'
format: 'json',
// options: 'stdout' or 'file' (set in config.outFile)
writer: 'file',
outFile: 'scrape_output.json'
});
pjs.addSuite({
// single URL or array
url: '',
scraper: function() {
//html2canvas can't use it because it's undefined in this scope
return '';
}
});
Related
I want display image in angularV10 and get it from backend and I don't know why image not display and got error I'm looking for how to solve but I don't get answer
please can someone guide me
back-end:
get_image:async(req,res,next)=>{
Image.findAll().then(data=>{
res.send(data)
}) }
api:
router.get("/get_image",uploadController.get_image)
Front-end Angular : service.ts
get_file(): Observable<any>{
return this.http.get(baseUrl + '/get_image' , { responseType: 'Blob' as 'json' })}
code:
createImageFromBlob(image: Blob) {
let reader = new FileReader();
reader.addEventListener("load", () => {
this.imageToShow = reader.result; <<< this.imageToShow
}, false);
if (image) {
reader.readAsDataURL(image);
console.log(image)
}
}
get_image():void{
this.AddFileService.get_file().subscribe(data=>{
this.createImageFromBlob(data);
console.log(data)
})}
html:
<img [src]="imageToShow "/>
Error :
big error
unsafe:data:application/json;base64, ..... alot of chars i don't under stand
Not much in the way of detail to this, but hopefully I can at least clear some things up for you so that you can find your footing with the issue a little better.
The lot of characters you don't understand are the base64 encoded string of the image (if your code is producing an image, appropriately, at least).
What you want to show as an image is a data URI and it looks much like you've shown:
data:image/jpeg;base64,[a lot of characters]
Depending on the actual image type, it might not be image/jpeg, it might be image/png, etc.
There's two things wrong with that final block you've shown:
unsafe:data:application/json;base64, ..... alot of chars i don't under stand
The first one, having now told you what it should look like, is that it thinks the data is application/json instead of the expected image/xyz. So your process for constructing that data URI is wrong somewhere.
I suspect it's where you are telling in your blob type is supposed to be json (thus, application/json):
get_file(): Observable<any>{
return this.http.get(baseUrl + '/get_image' , { responseType: 'Blob' as 'json' })}
The second is the clue to the main issue that you are really seeing: unsafe:....
In order to display images in Angular in this fashion, you need to put those URIs and whatnot through the DomSanitizer:
constructor(private readonly sanitizer: DomSanitizer) {}
public safeImage: SafeUrl;
private getImage(...): void {
const imageBase64String = this.createImageFromBlobOrSomething(...);
this.safeImage = this.sanitizer.bypassSecurityTrustUrl(imageBase64String);
}
And your template will then use safeImage instead:
<img [src]="safeImage"/>
That will stop the unsafe:... error, but then you'll find that you won't see an image, because the data URI is for application/json, instead of an image type, which you'll need to go ahead and fix.
Edit: My approach for multiple images is to save the images (if you want to keep the initial images for further usage/manipulation) or just only save the safe url version of them...
this.rawImages = data; // Wherever your images come from, and if you want to keep them...
this.safeImages = [];
this.rawImages.forEach((img) => {
this.safeImages.push(this.sanitizer.bypassSecurityTrustUrl(img));
});
Then instead of *ngForing the raw images themselves, do it over the safeImages array instead:
<div *ngFor="let safeUrl of safeImages">
<img [src]="safeUrl">
</div>
ok anyone use blob for any file image pdf is not good decide
the best solution i do upload image to backend and generate URL
this website is helpful if you use node.js here
I am trying to create multiple jBoxes using the data-attributes and I want to feed them with content from other elements.
I assumed this wouldn't be possible (out of the box), so I used a data-jbox-content-from attribute which is supposed to be point to the element with the content.
But I'm confused now: I know that I should be creating a single jBox only - but I do not see how that is doable when on the other hand I need distinct calls per element to provide the content?
And to confirm my uncertainty...the fiddle isn't working. So I hope someone will find a way to do this either my fixing bugs in my "ugly" approach (eaching over the controls) or a smarter use of JS/jBox.
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
}).attach();
});
Complete fiddle here
You approach is correct. But you need to put your code into domready:
$(document).ready(function () {
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
});
});
});
Also notice that I removed the .attach() method after new jBox. jBox does that when it initializes.
See updated fiddle: https://jsfiddle.net/StephanWagner/kqgxcda1/1/
I am trying to create an action that loads a view dynamically based on param passed in url
below is my routes.js
'GET faq/:alias': {actions:'faq'}
in my faq action
module.exports = {
friendlyName: 'FAQ Pages',
inputs: {
alias: {
description: 'the page url',
type: 'string'
}
},
exits: {
success: {
statusCode: 200,
},
notFound: {
responseType: 'notFound',
}
},
fn: async function(inputs, exits) {
console.log('static', inputs.alias);
//something like this - set view tempalatePath
//exits.success.viewTemplatePath = 'faqs/' + inputs.alias;
//load view if exist else throw notFound
return exits.success();
}
};
All my faq's are in a folder, I will check if the physical file exists using require('fs').existsSync() and then load load it
In the action2 format which you are using, you have to use throw to route to an alternate exit. See:
https://sailsjs.com/documentation/concepts/actions-and-controllers
Do not be confused by the documentation here:
https://sailsjs.com/documentation/reference/response-res/res-view
... I don't know what it applies to, but it doesn't apply to action2's in 1.0.
This took me a while to figure out too, but below is best way I found to work. In your faq action, change:
return exits.success();
to this:
return this.res.redirect('faq/' + inputs.alias);
BACKGROUND:
I notice in sails.js action2, when you use 'exits' where success responseType is defined as a 'view', it will not use the view-faq.js file at all, just skips directly to the faq.ejs page. I'm using responseType 'redirect' to go to the view-faq.js first before loading the page.
If you do use responseType 'view' in your exits.success, you would need to add into your action the same code from fn: in your faq.js, and also send the page locals. The problem I found with this method was an issue where the 'me' local somehow wasn't functioning properly with the new page view, which messed up my particular template.
Hope this saves someone else hours of time.
I'm having an issue where my KML Layer does not appear on an embedded google map on my website.
I made a free website using google sites and uploaded my KML file to it so that I could set the url: 'https://sites.google.com/site/kmlroute/home/kml'. The google map itself shows up but the KML layer at that url does not.
My code is below. Does anyone see any syntax errors, logic errors, or anything of the sort that would be stopping my KML Layer from appear on my map???
Any comments, help, and advice is welcome and sincerely appreciated.
function initMap(lat, lng) {
var myLatLng = {lat: lat, lng: lng};
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('bus_1_map'), {
center: myLatLng,
scrollwheel: false,
zoom: 12
});
var route = new google.maps.KmlLayer({
url: 'https://sites.google.com/site/kmlroute/home/kml',
map: map
});
You need to pass the URL of the XML file itself.
Try this:
var route = new google.maps.KmlLayer({
url: 'https://sites.google.com/site/kmlroute/home/kml/Bus%2022%20Route.kml.xml?attredirects=0&d=1',
map: map
});
How did I the url?
Go to https://sites.google.com/site/kmlroute/home/kml
Copy link address of the download arrow.
Using JSF and PrimeFaces I try to use java script external library (Highcharts) in order to display an image generated dynamically. Data used by the image is loaded from database. Image should be refreshed every n seconds.
In JSF I know that I can run java script function by
< h:outputScript name="js/volatilityChart.js">
but I have to somehow put parameters in order to appropriately display this function. I know there is possibility of calling execute() from RequestContext but I have no idea how to display an image generated in such a way. If knew I could probably use p:poll in order to refreshing it. I've searched the web but couldn't find proper solution.
Any advice will be appreciated.
Edited:
As followed BalusC suggestion and after some digging I managed to create something that suits me (simply speaking accessing bean fields and methods inside javascript code within xhtml). In XHTML I put:
<script>
//<![CDATA[
$(function () {
$('#container_portfolio').highcharts('StockChart', {
chart: {
alignTicks: false
},
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
title: {
text: ''
},
series: [{
type: 'column',
name: 'Volatility',
data: #{statisticsView.getStatistic()},
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
});
//]]>
</script>
Above function works and gives what I expected. However, I would like to insert many similar calls. Is it somehow possible to extract them to separate files? It would dramatically increase manageability of the code. Thanks in advance.