Question

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

加载现有图像res：//或〜/
将此图像的文字绘制到x，y位置
将此图像（res：//）绘制到x，y位置（可能缩放）

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

Answer 1

有一个名为nativescript-bitmap-factory的插件，它将完成这项工作。下面是一个用TypeScript编写的非角度项目代码示例（在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和完整工作示例here

的更多详细信息

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

1 个答案: