imageurldownloadpngbitcoin
Download a PNG from URL LookIntoBitcoin
There is a page with URL: https://www.lookintobitcoin.com/charts/1-year-hodl-wave/
I'm designing a page and I just want to reference the "image" of this URL. It has a download PNG file, how can i just get the path/url to this png image file?
Here is the image icon, but i cant figure out how to get the url path to just the png file. Can anyone show me how to get it?
Solution
This image is dynamically generated at client side (browser), so here is two ways to solve your problem:
Use Selenium or PhantomJS (both using headless browser technology) to emulate browser behaviour and automatically "press" download button at background.
Fetch JSON data and create graph by yourself (for example how to create PNG image based on txt file in python)
I recommend second way because it more flexible and you will be able to widely customize result image. But it may be more complicated than headless browser way.
If you want to use second way, you can fetch JSON data using python (for example):
import requests
import json
url = 'https://www.lookintobitcoin.com/django_plotly_dash/app/hodl_wave/_dash-update-component'
request_data = {
"output":"chart.figure",
"changedPropIds":["url.pathname"],
"inputs":[
{
"id":"url",
"property":"pathname",
"value":"/charts/1-year-hodl-wave/"
}
]
}
response = requests.post(url, json=request_data)
print(json.dumps(response.json(), indent=2))
And output will be:
{
"response": {
"props": {
"figure": {
"data": [
{
"line": {
"color": "#003366",
"width": 1.2
},
"name": "BTC Price",
"x": [
"2010-08-17",
"2020-09-13",
"2020-09-14",
...
"2021-09-07",
"2021-09-08"
],
"y": [
0.07,
0.07,
...
46215.0
],
"yaxis": "y2",
"type": "scatter"
},
{
"connectgaps": true,
"line": {
"color": "#ffa500",
"width": 0.8
},
"name": "1Yr+ HODL Wave",
"x": [
"2010-08-17",
...
"2021-12-16T00:00:00",
"2021-12-17T00:00:00"
],
"y": [
0.28032062150000003,
0.2807032645,
...
0.5101534705064048,
0.5090896880670537
],
"yaxis": "y",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(255, 207, 209, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Peak",
"showlegend": true,
"x": [
"2011-06-13"
],
"y": [
20.11
],
"yaxis": "y2",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(255, 207, 209, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Peak",
"showlegend": false,
"x": [
"2011-06-13"
],
"y": [
0.2979442568
],
"yaxis": "y",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(255, 207, 209, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Peak",
"showlegend": false,
"x": [
"2013-12-02"
],
"y": [
1047.9
],
"yaxis": "y2",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(255, 207, 209, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Peak",
"showlegend": false,
"x": [
"2013-12-02"
],
"y": [
0.3877138953
],
"yaxis": "y",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(255, 207, 209, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Peak",
"showlegend": false,
"x": [
"2017-12-20"
],
"y": [
16811.3
],
"yaxis": "y2",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(255, 207, 209, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Peak",
"showlegend": false,
"x": [
"2017-12-20"
],
"y": [
0.43133634880000005
],
"yaxis": "y",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(211, 245, 231, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Bottom",
"showlegend": false,
"x": [
"2011-11-22"
],
"y": [
2.31
],
"yaxis": "y2",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(211, 245, 231, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Bottom",
"showlegend": false,
"x": [
"2011-11-22"
],
"y": [
0.3073864328
],
"yaxis": "y",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(211, 245, 231, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Bottom",
"showlegend": false,
"x": [
"2015-01-17"
],
"y": [
201.75
],
"yaxis": "y2",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(211, 245, 231, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Bottom",
"showlegend": false,
"x": [
"2015-01-17"
],
"y": [
0.5363931366
],
"yaxis": "y",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(211, 245, 231, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Bottom",
"showlegend": true,
"x": [
"2018-12-20"
],
"y": [
3983.01
],
"yaxis": "y2",
"type": "scatter"
},
{
"hoverinfo": "skip",
"marker": {
"color": "rgba(211, 245, 231, 0.75)",
"size": 15
},
"mode": "markers",
"name": "Price Bottom",
"showlegend": false,
"x": [
"2018-12-20"
],
"y": [
0.5097358173
],
"yaxis": "y",
"type": "scatter"
}
],
"layout": {
"hovermode": "closest",
"images": [
{
"layer": "below",
"opacity": 0.1,
"sizex": 0.4,
"sizey": 0.4,
"source": "https://www.lookintobitcoin.com/static/img/logo/logo-stacked.png",
"x": 0.4,
"xref": "paper",
"y": 0.75,
"yref": "paper"
}
],
"legend": {
"font": {
"color": "#696969"
},
"orientation": "h",
"x": 0.1
},
"margin": {
"t": 10
},
"uirevision": "False",
"xaxis": {
"color": "#696969",
"gridcolor": "#d3d3d3",
"hoverformat": "%d-%b-%y",
"range": [
"2010-08-17",
"2021-12-17T00:00:00"
],
"showline": true,
"showspikes": true,
"spikecolor": "#696969",
"spikedash": "solid",
"spikemode": "toaxis+across",
"spikethickness": 1
},
"yaxis": {
"color": "#696969",
"hoverformat": "%",
"range": [
0,
1
],
"showgrid": false,
"showspikes": true,
...
"spikethickness": 1,
"tickformat": "%",
"title": {
"text": "1Yr+ HODL Wave"
}
},
"yaxis2": {
"color": "#696969",
"dtick": 1,
...
"spikethickness": 1,
"ticktext": [
"$0.001",
...
"$10,000",
"$100,000"
],
"tickvals": [
0.001,
...
100000
],
"title": {
"text": "BTC Price (USD)"
},
"type": "log",
"zeroline": true
}
}
}
}
}
}
- Got an error Invalid src prop ('here is a link') on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`
- How to display images saved in wwwroot in ASP.NET Core projects?
- Convert RGB to class / single integer value
- Watermarking with PDFBox
- How can I change an image source based on text content?
- Trying to download all of the images on the website using javascript
- Error converting base64 to real image - file could not be opened
- HTML Image not displaying, while the src url works
- How to preview multiple inputs
- How do I get onmouseenter and onmouseleave to report with respect to an image rather than to its containing div?
- SVG: stretching an image
- Cannot convert base64 string into image
- Converting Image Python code to C#
- Count the number of rectangles in an image
- OpenCV can't find ORB
- How to stack images horizontally in README.md
- How to scale a BufferedImage
- Accessing info about file uploaded in PHP and modifying with GD
- How to zoom and center on double click in Image in WinUI 3?
- problem with img in html
- Setting WPF image source in code
- Python - Extract a PDF page as a jpeg
- Force reload Image when url changes SwiftUI
- How to fix: Unable to get the size of the image [] with HTML2PDF
- Resize image in the wiki of GitHub using Markdown
- Generate ffmpeg thumbnail from stream in Node.js
- Image in WPF Button not Visible at Runtime
- CTkButton - Pictures on Buttons do not show from beginning
- Why does a table cell with a vertically-aligned element not align with a table cell without it?
- Images not displaying in Django webapp deployed on Vercel