javascript - Nativescript:用黑色空间代替照片缩略图

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' }}"/>

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

Answer 1

如果您为任何父元素设置了 CSS 属性颜色: this is documented bug在 NativeScript 2.3.0 中，并计划在下一版本 (2.4.0) 中修复。如果您现在想使用下一个版本，可以按照以下步骤进行:

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

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