Nativescript + Angular2 以编程方式创建图像并共享

Question

我需要一个示例来以编程方式创建图像：

加载现有图像 res:// 或 ~/
将此图像的文本绘制到 x,y 位置
将另一幅图像 (res://) 绘制到此图像的 x,y 位置（可能已缩放）

然后用这个插件分享这张图片：http://plugins.telerik.com/nativescript/plugin/social-share

Answer 1

有一个名为 nativescript-bitmap-factory 的插件，它可以完成这项工作。这是一个用 TypeScript 为 non-angular 项目编写的示例代码（在 Angular 项目中应该几乎相同）。

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);
    });

}

有关插件的更多详细信息here and the full working example here

Nativescript + Angular2 以编程方式创建图像并共享

Nativescript + Angular2 Create image programmatically and share

android

angular

nativescript

socialshare