Save Image from URL

How-to Discussions
1

Is it possible to download an image from an URL and store into the device?

2

Hi!

There is currently no out-of-the-box JS api for this, but you probably would be able to do it through foreign code if you don’t mind writing some code :slight_smile:

You could take a look here (https://www.fusetools.com/learn/uno#working-with-foreign-code) to get started.

3

Hello! Since this thread is one year old, is there a working JS api available for this? I was thinking of using Fetch to get the JPG file from the server, and then saving this binary data to the device using the Storage module. How can I reference the saved data to be used in the Image class?

4

Since I had a control over the backend I managed to solve this by creating a PHP script to encode the JPG file in to Base64 with this (image.php):

<?php $imagedata = file_get_contents("image.jpg"); echo base64_encode($imagedata); ?>

After that the Javascript:

<App>
  <JavaScript>

  var Observable = require("FuseJS/Observable");
  var ImageTools = require("FuseJS/ImageTools");
  var Storage = require("FuseJS/Storage");
  var myImage = Observable();

  fetch("http://www.domain.com/image.php", {
      method: "GET"
    }).then(function(response) {

      return response._bodyText;

    }).then(function(data) {

      console.log("Saving");

      Storage.write("image.jpg", data).then(function (success) {

        console.log("Saved");

        Storage.read("image.jpg").then(function(content) {

          console.log("Loading");

          ImageTools.getImageFromBase64(content).then(function(image) {

            console.log("Loaded");

            myImage.value = image.path;

          });

        });

      });

    });

  module.exports = {
    myImage : myImage
  };

  </JavaScript>
  <Image File="{myImage}" />
</App>

I’m not sure how to encode JPG’s to Base64 in JavaScript, but this works for me.