I'm using JavaScript for app I'm currently working on. I've created file picker as shown in guide.
After file is picked I get object Windows.Storage.StorageFile. This file is image, my question is how to display image in img tag for example?
Let's say you have an image tag in your page like:
<img id="theImage" />
then in your JavaScript callback from selecting the file, you'd set the img src property to a URL (using createObjectURL) that you create from the StorageFile reference:
var picker = Windows.Storage.Pickers.FileOpenPicker();
picker.fileTypeFilter.replaceAll([".png"]);
picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
// Launch the picker in open mode
picker.pickSingleFileAsync().then(function (file) {
var imgElement = document.getElementById("theImage");
imgElement.src = URL.createObjectURL(file);
});
Related
Following my previous question here,
I have a desktop application using Electron platform and Javascript where I am converting an HTML5 canvas to JPEG using:
<a id="download" download="Path.jpg">Download JPG</a>
then,
function download(){
var dt = canvas.toDataURL('image/jpeg');
this.href=dt;
}
document.getElementById('download').addEventListener('click', download, false);
This refreshes my whole application. How can I change this behavior, such that the page does not refresh when the download attribute is clicked?
I can think of this two snippets, one using blob and one using the download element. external-library: FileSave.js
// this one use FileSaver.js library
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
// or this way using download element.
// here you can encode your image-data and then send it.
var download = document.getElementById('download');
download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(imageData));
download.setAttribute('download', 'file.jpg');
also I found this one just now, electron specific solution :
Saving files locally with electron
Edit your anchor tag a bit
<a id="download" download="Path.jpg" target="_blank" onClick="download();">Download JPG</a>
And then your download function
function download(event){
event.currentTarget.href = canvas.toDataURL('image/jpeg');
}
This might help
I am working on a admin feature for company control panel. The widget I am trying to create is for admin's to replace the default logo on the control panel with their own company logo.
I'm using localStorage for proof of concept but it will be saved into database and CMS at production.
I have the basics working in terms of uploading a new image/logo and replacing the default. However, we are pre-seeding the control panel header with an "out of box" default logo. For some reason, the default logo does not show up when page is first loaded. You currently get a broken image icon. Once you upload a new image it replaces the header logo and keeps the current selection in the admin widget.
If you refresh page it recalls this from localStorage which is working just fine but if you reset, you will notice that the pre-seeded logo does not appear.
var img = new Image();
img.src = localStorage.theImage;
$('.logoArea').html(img);
$("body").on("change", ".uploadLogo", function() {
var fileInput = $(this)[0];
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
// CREATE A NEW IMAGE
var img = new Image();
img.src = reader.result;
localStorage.theImage = reader.result; // STORE IMAGE IN LOCAL STORAGE
$(".logoArea").html(img);
}
reader.readAsDataURL(file);
});
Not sure where I'm going wrong. Please see fiddle for working model
Update: This was resolved and I updated fiddle below to working version in case it helps anyone else out.
https://jsfiddle.net/evmcatj1/7/
On the first Load the localStorage.theImage; is undefined you should use a default image in case is the first time that the user opens the page
I am working on a QR Code project and some image is generated via Canvas. So they are not actually images. And users can't download/save it by hitting a "save as" context menu item.
How do I let the users able to download it?
Assuming your "Save as" button look something like this (uninitialized, see below):
Save as
Then when you have created the QR code on canvas do the following to initialize it:
/// QR created here..
var link = document.getElementById('saveas');
link.download = 'filename.png'; /// set a filename or a default
link.href = canvas.toDataURL(); /// create a data-uri as link
The key here is the new download attribute for the anchor tag. This will pop up a save as requester instead of navigating to the image.
You can also chose to hide the link and show it when it's initialized. You get the idea..
var image = new Image();
image.src = canvas.toDataURL("image/png");
document.body.appendChild(image); // or whereever you want.
edit: onload event handler is only required for server-loaded images.
// create save tag then
var data = canvas.toDataURL(); // default is png add param image/jpg if you want to
document.getElementById('save').href = data;
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 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