原生脚本:黑色空间代替照片缩略图

Question

请帮忙，我正在做一个用相机拍摄的照片的缩略图，并在base64编码。

Javascript:

  class Entry {
  get thumbnail() {
        return (this._thumbnail || null);
  }
  set thumbnail(value) {
        let scaledImage = false;
        if (value) {
            if (value.android) {
                const aspectSafeSize = common.getAspectSafeDimensions(value.width, value.height, config.thumbWidth, config.thumbHeight);
                scaledImage = android.graphics.Bitmap.createScaledBitmap(value.android, aspectSafeSize.width, aspectSafeSize.height, true);
            }
            if (value.ios) {
                const cgSize = CGSizeMake(config.thumbWidth, config.thumbHeight);
                UIGraphicsBeginImageContextWithOptions(cgSize, false, 0.0);
                value.ios.drawInRect(CGRectMake(0, 0, config.thumbWidth, config.thumbHeight));
                scaledImage = UIGraphicsGetImageFromCurrentImageContext();
                UIGraphicsEndImageContext();
            }
        }
        if (scaledImage) {
            const scaledImageSource = new ImageSourceModule.ImageSource();
            scaledImageSource.setNativeSource(scaledImage);
            const t = 'data:image/png;base64,' + scaledImageSource.toBase64String('png',100);
            this._thumbnail = t;
        }
    }
}

XML格式:

<Image top="0" left="0" src="{{ thumbnail }}" stretch="aspectFill" visibility="{{ thumbnail ? 'visible' : 'collapsed' }}"/>

但是只显示黑色空间:截图。此外，如果对编码数据进行获取并尝试解码，我们会得到一张正常的图片

Answer 1

如果你为任何父元素设置了CSS属性color:这是NativeScript 2.3.0中记录的错误，计划在下一个版本(2.4.0)中修复。如果你想在这个时候使用下一个版本，你可以按照下面的步骤来做:

tns plugin remove tns-core-modules
tns plugin add tns-core-modules@next

现在您将拥有已经应用了修复的最新模块。