Convert blob to bitmap image in Appcelerator titanium

Question

I have an image's Blob and want to convert it into Bitmap image to use android Canvas, Path and Paint in appcelerator Titanium. I went through appcelerator docs but couldn't find any method that allows me to convert directly. I tried converting blob to Base64 string and then create the bitmap object using android native methods through hyperloop but was unsuccessful.

Then I tried converting base64 to byte array and create bitmap using this code by using Hyperloop but bitmap is empty :

             var BitmapFactory = require('android.graphics.BitmapFactory');
             var ByteArrayInputStream = require("java.io.ByteArrayInputStream");

            var stringToSaveInDatabase = Ti.Utils.base64encode(newBlob).toString();
            var bytes = [];
            for (var k = 0; k < stringToSaveInDatabase.length; k++) {
                bytes.push(stringToSaveInDatabase.charCodeAt(k));
            }
            var arrayInputStream = new ByteArrayInputStream(bytes);
            var bitmap = BitmapFactory.decodeStream(arrayInputStream);

Sorry, my example wasn't working correctly since I've used a custom SDK. Converting to a ByteArray works fine like this: var istream = new ByteArrayInputStream(new String(blob.toBase64().toString()).getBytes(StandardCharsets.UTF_8)); console.log("istream: " + istream); console.log("bmp: " + BitmapFactory.decodeStream(istream)); but the decodeStream returns null at the end. That might be the case in your example too. You could save the image first and then use this to load that resource: jira.appcelerator.org/browse/… — miga
yes I am getting null though blob object is present in memory.I found this class docs.appcelerator.com/module-apidoc/latest/android/… it has methods : fromBlob(Activity activity, TiBlob blob) and getBitmap() which could let me convert from blob to bitmap but I have no idea how to access this class. I tried require("org.appcelerator.titanium.view.TiDrawableReference") but I am getting error Requested module not found. Do you have any idea how to access this class and use its methods ? — Mario
jira.appcelerator.org/browse/… accessing core ti classes is not supported — miga

miga miga · Accepted Answer · 2018-10-05T13:38:51

Updated examples:

var Activity = require('android.app.Activity')
var ImageView = require('android.widget.ImageView');
var Base64 = require('android.util.Base64');
var BitmapFactory = require('android.graphics.BitmapFactory');
var activity = new Activity(Ti.Android.currentActivity);
var RenderScript = require("android.renderscript.RenderScript");
var Allocation = require("android.renderscript.Allocation");
var Element = require("android.renderscript.Element");
var ScriptIntrinsicBlur = require("android.renderscript.ScriptIntrinsicBlur");

$.img.addEventListener("load", function() {
    $.img.toImage(function(blob) {
        var encodeByte = Base64.decode(blob.toBase64(), Base64.NO_WRAP)
        var bmp = BitmapFactory.decodeByteArray(encodeByte, 0, encodeByte.length);

        const bmpOut = bmp.copy(bmp.getConfig(), true);
        const rs = RenderScript.create(activity);
        const blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        const allIn = Allocation.createFromBitmap(rs, bmp);
        const allOut = Allocation.createFromBitmap(rs, bmpOut);

        blurScript.setRadius(2.0);
        blurScript.setInput(allIn);
        blurScript.forEach(allOut);
        allOut.copyTo(bmpOut);
        bmp.recycle();
        rs.destroy();

        var image = new ImageView(activity);
        $.index.add(image);
        image.setImageBitmap(bmpOut);
    })
})

$.index.open();

index.xml:

<Alloy>
    <Window class="container">
        <ImageView id="img" image="/images/DefaultIcon.png" />
    </Window>
</Alloy>

bmp will be the Bitmap out of the ImageView it will apply a blur and add it to the window again.

Convert blob to bitmap image in Appcelerator titanium

1 Answers