I'm building a utility which will pull TIF files from blob storage and render them in html. Since it's just a utility, I will view them in Edge, which shows TIF files.
I can see the eighth example on this page renders fine. Meaning, this code works:
<img width=200 height=200
src="tiffdocument.tif" alt="">
However, my HTML, below, does not render anything:
<img src="https://atpblob.blob.core.windows.net/imagedata/94ae9802-4e42-4ba1-8955-11ac7c7e3509.tif" alt="" width="500" height="500">
If I go directly to the link in the source, it will download the image, so why won't it render?
Got it.
img does not work the way I was trying to use it. You have to explicitly use a GET request to pull the file.
For rendering the file cross-browser, I ended up using tiff.js.
The final html/js/css string I pushed to the browser ended up looking like this:
<!doctype html>
<html>
<head>
<title>TIF View</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.rawgit.com/seikichi/tiff.js/f03d7965/tiff.min.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'https://atpblob.blob.core.windows.net/imagedata/${blob}.tif');
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var canvas = tiff.toCanvas();
document.body.appendChild(canvas);
};
xhr.send(null);
</script>
<style>
canvas {
min-height: 60px;
}
</style>
</body>
Related
I used window.print() function and saved to a .pdf file.
Inside the page I've saved there is a <a href="www.example.com"> tag. When I'm downloading the file from Chrome the link works and it opens the right page. When downloading it from Edge it won't work and stays as a simple text.
Any solution?
I tested and reproduced the issue. I think we can only use some plugins to generate the pdf to get the href link working in Edge Legacy.
You could use jsPDF to generate the PDF. Use .textWithLink() to mimic standard HTML hyperlinks:
doc.textWithLink(text, x, y, { url: url });
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<body>
<script>
var doc = new jsPDF('p', 'pt');
doc.textWithLink('link', 20, 30, { url: 'http://www.google.com' });
doc.save("info.pdf");
</script>
</body>
</html>
To override the chrome web store new tab page I use the following code:
"chrome_url_overrides": {
"newtab": "index.html"
}
I have a backend which serves the html files so instead of using the index.html file I would like to get a html file via a http request.
Is this possible? Or is there a workaround Thanks.
You could make an ajax call from your index page to remote server, and replace the entire html with external html. Sample code looks like the following
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
index.js
var SERVER_URL = "";
var xhr = new XMLHttpRequest();
xhr.onload = function() {
replaceHtml(xhr.responseText);
};
xhr.open("GET", SERVER_URL);
xhr.send();
function replaceHtml(data) {
document.open("text/html");
document.write(data);
document.close();
}
You could simply have some javascript inside a <script></script> tag in your index.html file that grabs your generated html content from a custom domain.
JS touch events in an .html file that I mail as an attachment to an iPhone5 (OS9.2), are never executed because a touch on the screen is intercepted by the Mail and interpreted as DONE. I'm new to this. Am I missing something obvious? The following code works in XCodeSimulator but not in a real phone. Is there a workaround? Are .html files unsupported in an attachment, for some reason?
Below is a typical test code I'm using. I prefer to work in vanilla JS, rather than JQuery, but I'd be grateful for any suggestions or advice, whatever.
<!DOCTYPE html>
<html>
<head>
<style>
#mycanvas{
position: absolute;
top:100px;
left:100px;
border:4px solid;
}
</style>
<script>
function init() {
var touchzone = document.getElementById("mycanvas");
touchzone.addEventListener("touchstart",draw,false);
}
function draw() {
var canvas = document.getElementById('mycanvas');
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillRect(event.touches[0].pageX-100, event.touches[0].pageY-100,10,10);
}
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="500" height="500">
Canvas element not supported.
</canvas>
<h2> Tap inside rectangle to leave a spot. Outside leaves nothing.</h2>
</body></html>
We realized that an .html e-mail attachment cannot work in iOS. Placing the file in Public folder on Dropbox gives it a web address that the phone can link. This works for us so far.
I recently discovered that mobile safari (on iOS 9.1 - though unsure about older safari versions) has an unfortunate problem with multiple connections and images. If you have six images when you load a page, it will delay XHR requests that loads after those six images by a huge lag time (order of 30s).
For example, I loaded the following using a standard NodeJS/Express server and saw giant delays before the alert showed up - despite the fact that all there images are just a couple of KB and I can visibly see that they are all loaded. The dev console also shows the images loaded but not the XHR request. The duration it took to download the file was very small but the latency was huge.
This is not a problem on any other browsers (mobile chrome, regular safari, etc).
Sample problem html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="/static/images/home/payment.png">
<img src="/static/images/home/couple-present-mobile.jpg">
<img src="/static/images/general/welcome.jpg">
<img src="/static/images/general/arrow-down.png">
<img src="/static/images/general/arrow-right.png">
<img src="/static/images/general/check.png">
<script>
var url = '/static/test.html'
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url));
xhr.onload = function() {
alert(url) //This takes forever
};
xhr.send();
</script>
</body>
</html>
An odd thing is if you ran the XHR request BEFORE there were 6 images, it would work perfectly. In fact, if you even did something like this one below, it was fine. I think this works because the background CSS image must retrieve the URL after the XHR is initiated.
Replace one of the img tags with a background css image and it works:
<!DOCTYPE html>
<html>
<head>
<style>
.test {
background-image: url("/static/images/home/check.png");
height: 400px;
}
</style>
</head>
<body>
<img src="/static/images/home/payment.png">
<img src="/static/images/home/couple-present-mobile.jpg">
<img src="/static/images/general/welcome.jpg">
<img src="/static/images/general/arrow-down.png">
<img src="/static/images/general/arrow-right.png">
<!--<img src="/static/images/general/check.png"> REMOVE THIS LINE and add the background image instead-->
<div class="test"></div>
<script>
var url = '/static/test.html;
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url));
xhr.onload = function() {
console.log(url) //NO DELAYS!
};
xhr.send();
</script>
</body>
</html>
Also I found out that just running 7 simultaneous XHR requests also does not cause this problem (such as the below):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var urls = ['/static/images/home/payment.png',
'/static/images/home/couple-present-mobile.jpg',
'/static/images/general/arrow-right.png',
'/static/images/general/arrow-down.png',
'/static/images/general/welcome.jpg',
'/static/images/general/check.png',
'/static/test.html'];
for(var i = 0, ii = urls.length; i < ii; i++){
(function(){
var url = urls[i];
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url));
xhr.onload = function() {
console.log(url)
};
xhr.send();
})()
}
</script>
</body>
</html>
Has anyone come across this problem and figured out a way to deal with it without reducing the number of images or putting them in a sprite or something?
The hack I ultimately used to get around this was to load the images from a different host. For simplicity, if the browser detected that the host was www.domain.com, I would load images it from domain.com and vice versa. You can also just have all your images come from a certain host like images.domain.com and keep your api's and other stuff on another host.
Not the most ideal or elegant solution, but its super simple to implement and solves the problem.
I use the following html5 code to display a html page with an image(1.JPG). Its working fine. The image will be randomly overwritten with an another newer image in a certain interval in the same path provided. So, I use meta tag to refresh the page, so that whenever any newer image is overwritten in the path, the page will be refreshed with the updated image automatically. But, it looks like refreshing the page for every 5 secs fine, but its NOT displaying the newer image which has overwritten in the same path, it always shows with the initial image i kept. Could someone help me to fix this issue?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<meta http-equiv="refresh" content="5">
</head>
<body>
<canvas id="myCanvas" width="578" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'italic 30pt Calibri';
context.fillText('Screen sharing', 10, 50);
</script>
<p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>
</body>
</html>
Meta tag Refresh URL, please try
<meta http-equiv="refresh" content="5; ,URL=http://domain.com">
OR You can do it from javascript
<script type="text/javascript">
setInterval(function(){
window.location.reload();
},5000);
</script>
And please use SERVER url to load image instead of file url
<p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>
Change To
<p><img src = "http://domain.com/Downloads/1.JPG" /> </p>