Nativescript + Angular2 Create image programmatically and share

Question

I need an example to create image programmatically:

• load an exisiting image res:// or ~/

• draw a text to this image to x,y position

• draw another image (res://) to this image to x,y position (maybe scaled)

and then share this image with this plugin: http://plugins.telerik.com/nativescript/plugin/social-share

Answer 1

There is a plugin called nativescript-bitmap-factory and it will do the job. Here is a sample code is written in TypeScript for a non-angular project (should be almost identical in an Angular project).

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { ImageSource, fromFile } from "image-source";

import * as BitmapFactory from "nativescript-bitmap-factory";
import * as SocialShare from "nativescript-social-share";
var resultImage: ImageSource;

export function navigatingTo(args: EventData) {

    var myImage = fromFile("~/images/cosmos.jpg");
    var bmp = BitmapFactory.asBitmap(myImage.toBase64String("jpg", 100));

    var myImage2 = fromFile("~/images/another.png");
    var bmp2 = BitmapFactory.asBitmap(myImage2.toBase64String("jpg", 100));

    bmp.dispose(() => {

        // write to x 100 and y 100 in blue color and with 48 font-size (can provide font as well)
        bmp.writeText("TEST!", "100,100", {
            color: '#0000ff',
            size: 48
        });

        //crop bmp2
        var tmpBmp = bmp2.crop( {x:128,y:0}, {width:128, height:128} );
        //insert cropped bmp2 to bmp
        bmp.insert(tmpBmp, "25,50");

        // ... and as ImageSource
        var resultImage = bmp.toImageSource();

        SocialShare.shareImage(resultImage);
    });

}

More details about the plugin here and the full working example here