I have a saved image in android "mnt/sdcard/offlineImages" folder. The image is named img_0.jpg.
Now I want to display this image on a html page via javascript.
I tried the following two cases.
CASE ONE WHICH WORKS.
html
<img id="anImg" />
javaScript
document.getElementById('anImg').src = "file:///mnt/sdcard/offlineImages/img_0.jpg";
CASE TWO, WHICH DOESN'T WORK.
html
<div id="img_wrap"></div>
javascript
var anImg = new Image();
anImg.src = "file:///mnt/sdcard/offlineImages/img_0.jpg";
document.getElementById("img_wrap").appendChild(anImg);
var anImg= document.createElement('img');
anImg.src = "file:///mnt/sdcard/offlineImages/img_0.jpg";
anImg.width="200px"; // consider adding width
anImg.height="150px"; // consider adding height
document.getElementById("img_wrap").appendChild(anImg);
Try this
Related
I've used the following code in an embedded code field on Google Sites to display images on my website, it's all going well on my Windows, Linux and Android devices, but they don't show up on the iPhone (whether using Chrome or Safari)!
<form name="submit-to-google-sheet">
<img id="img1" width=163 height=227>
</form>
<script>
const img1 = document.getElementById('img1');
img1.src = "https://docs.google.com/uc?export=view&id={imageGoogleDriveID}";
</script>
some context/constraints: I'm pulling my images from my Google Drive. They are ~80kb JPEGs. I'm using a HTML form as I have other elements (buttons, fields) which I've removed from the code extract below to focus on the issue. I need to keep this form.
I've explored the Base64 format which does allow to display the images on iOS-operated devices (or so I understood). It works if I just set the image source to a Base64 URI:
imgBase64.src = "data:image/jpeg;base64,/9j/4 [...] //9k=";
But I can't call a Base64 file from Drive as conveniently as a JPEG.
I'm manipulating 250+ images so I can't either have the base64 strings in the middle of the code, it'd be too large to work with.
I've come up with the piece of code below, and I end up getting:
on Android/Windows: a nice image for img1 and a simple black square for imgBase64
on iOS: an empty box for img1 (my issue in the first place) and a simple black square for imgBase64
After investigation, it seems that the URI I get out of canvas.toDataURL("image/jpeg") is not at all the same thing as what I get out of an encoder (such as base64.guru/converter/encode/url). It is very short and I get a lot of As. It seems that the canvas is not loading the image correctly:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCADjAKMDAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJ/4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//Z
Any idea why the conversion doesn't work?
<form name="myForm">
<img id="img1" width=163 height=227>
<img id="imgBase64" width=163 height=227>
</form>
<script>
const form = document.forms['myForm'];
var imageUrl = "https://docs.google.com/uc?export=view&id={imageGoogleDriveID}";
const img1 = document.getElementById('img1');
img1.src=imageUrl;
const imgBase64 = document.getElementById('imgBase64');
const canvas = document.createElement("canvas");
canvas.width = 163;
canvas.height = 227;
img1.onload = function() {
canvas.getContext("2d").drawImage(img1, 0, 0);
}
var dataURL = canvas.toDataURL("image/jpeg");
imgBase64.src = dataURL; //gives me a black square
imgBase64.src = "data:image/jpeg;base64,/9j/4 [...] //9k="; //works fine!
</script>
We just found the fix for iOS: when third-party cookies and cross-site tracking are blocked, the images don't load. The settings to toggle are explained here.
Base64 wasn't the solution, since the issue was coming from pulling images from my Google Drive, i.e. a different domain from my website. However I still haven't found why drawImage() doesn't work.
I have hosted my site on Wordpress. and recently I have been facing the problem of an image link broken in my site. I don't know when it's happened. The problem arises in the only post section.
There are some ways to do that, but if you don't know where to start, you can try this with javascript:
function findToDeleteBrokenImages() {
var images = Array.from(document.querySelectorAll("img"));
for (var image of images) {
var img = new Image();
img.onerror = function () {
image.parentElement.removeChild(image);
};
img.src = image.src;
}
};
findToDeleteBrokenImages();
<img src="foo" />
But notice that, there are serveral ways to display an image, too. So, if your image is shown as a background of some div element or canvas, you can use the same logic of the code above, but the way to remove/delete that element is different.
I'm currently using a File Picker to get a picture, using the example code from the Quickstart Tutorial: Accessing files with file pickers to select the picture.
This works fine, the problem comes when I try to use the selected image on screen, using an HTML img tag.
openPicker.pickSingleFileAsync().then(
function (file) {
if (file) {
var picture = document.getElementById("pictureId");
picture.src = new Windows.Foundation.Uri(file.path);
}
}
);
The picture's file.path is in the form of C:\Users\<user>\Pictures\example.jpg
I've tried using:
picture.src = file.path
picture.src = new Windows.Foundation.Uri(file.path)
I've also tried copying the path directly to the <img> tag to make sure it's not a screen refresh issue, but it still doesn't load.
The corresponding HTML, if relevant, is:
<div>
<img id="pictureId" class="pictureClass" src="" />
<button id="addPictureButton" class="">Add Picture</button>
</div>
What am I missing here?
Perhaps try one of the following
picture.src = URL.createObjectURL(file);
OR
picture.src = window.URL.createObjectURL(file);
References
createObjectURL method: http://msdn.microsoft.com/library/windows/apps/hh453196
How can I draw an image from the HTML5 File API on Canvas?
I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:
var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});
and:
$('image').on('load')
all to no avail. I've also used "onload" and "onsvgload" none of which work.
Is there away to determine if an svg image has actually loaded?
I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image);
ie:
var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
image.path = preload.src;
//Now load image in raphael - except this still forces the browser to make another call for the image
});
Any ideas?
Using the onLoad event handler works, with one additional line of code:
var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
console.log("image is loaded!");
})
You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired
I have an image with set src attribute.
I would like to replace image, but connection with the server is slow and time that it takes to load a new image is not negligible.
Is there possibility to create internal Image object, set kind of "onLoadListener" on it, load an image and then set it to original image src attribute?
You can pre-load images in JavaScript like this...
myImage = new Image();
myImage.onload = function () { alert("Loaded"); };
myImage.src = "logo.gif";
You can put the logic to pop the image on the page instead of alert-ing.