ubuntu-touch-coreapps team mailing list archive

[Joey Chan <qqworini@xxxxxxxxx>]

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 :)