ubuntu-touch-coreapps team mailing list archive

[mrqtros@xxxxxxxxx]

Other teams need this ability too, so it is must be included in sdk and used this way:
// qml code
Ubuntu.saveImageToLocalStorage(...)
...
Ubuntu.loadImageFromLocalStorage(...)

Or something like that =)))


27.03.13 13:39 Joey Chan написал(а):

Hi Ladies and Gentlemen,


I'm here to discuss about the "offline image using pure qml", which means, If images are from remote server, we developers need to download them to local file system so that apps can load images without Internet connections.


solution 1       ( failed )


this solution use xmlhttprequest to download the whole image data, convert it to base64 string then show it to "Image"


source code:
var xhr = new XMLHttpRequest();
xhr.overrideMimeType('text/plain; charset=x-user-defined');   // doesn't work in qml but html

xhr.open("GET", "http://www.xxx.com/xxx.png";);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        var blob = xhr.responseText ;
                    var blobarray = new Array ;
                    for (var i = 0, len = blob.length; i < len; ++i) {
                        blobarray.push(blob.charCodeAt(i) & 0xff );
                    }
// then use        Image.source = "data:image/png;base64," +  blobarray.join("")     to show the image


    }
};
xhr.send();


This snippet shows an old way to download binary data using xmlhttprequest level 1, but not work in qml ( overrideMimeType not supported ) .
Also, xmlhttprequest level 2 (support binary data) not supported by qml 2.0


Conclusion: it's better update the xmlhttprequest to level 2





solution 2:  (success but not perfect)


This solution use qml2 canvas to load a remote url then save it to local file system.


source code:
property string url: "http://www.xxx.com/xxx.png";

    Canvas {
        id: mycanvas
        y: 350
        width: 200
        height: 200


     Component.onCompleted:
    {
        mycanvas.loadImage(url);
    }


        onImageLoaded:
        {
            console.log("onImageLoaded");
            requestPaint();
        }


        onPaint: {
            var ctx = mycanvas.getContext("2d");




            ctx.drawImage(url, 0, 0);
            ctx.restore();




        }
    }


MouseArea
        {
            anchors.fill: parent
            onClicked: mycanvas.save("./aaa.png");
        }




This solution can download every image, but, the final function "save" can't support "homepath" and "temppath", which means, we don't know where we can put the downloaded images such as "home"/.cache/coreapp/images/


Conclusion: homepath is needed







Feel free to prove I am wrong  :P  because I am confusing about the offline mode of the RSS reader Core App


Have a nice day :)