reactnative 使用react-native-image-marker库完成图片加水印的功能,如何设置水印宽高?

发布于 2022-09-12 13:25:59 字数 1871 浏览 19 评论 0

我使用了react-native-image-marker库完成图片加水印的功能,现在根据文档仅仅是通过设置markerScale去控制水印大小,但我上传的图片宽高大小都不一,现在会出现水印偏移或者水印未能完全覆盖图片的情况。react-native-image-marker

getWaterImage = params => {
        const { img, setStatus, setName } = params;
        ImageMarker.markImage({
            src: img,
            markerSrc: require('./images/water_img.png'),
            position: 'center', // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center
            maxSize: 100,
            scale: 1,
            markerScale: 4,
            saveFormat: 'base64',
            quality: 100
        })
            .then(path => {
                this.setState({
                    [setName]: path,
                    ...setStatus
                });
            })
            .catch(err => {
                console.log(err, 'err');
                this.setState({
                    loading: false,
                    err
                });
            });
    };
 <ImageBackground
                                    style={styles.cameraImg}
                                    source={{ uri: handImgPath }}
                                    resizeMode={'stretch'}
                                >
                                    {handImgStatus !== 'normal' && handImgStatus !== 'success' ? (
                                        <View style={styles.cameraMask}>
                                            <Text style={styles.cameraTips}>上传中</Text>
                                        </View>
                                    ) : null}
                                </ImageBackground>

我希望水印能刚好覆盖在图片上,我使用的是base64的图片,请问有使用过这个库的小伙伴吗?我想知道你们有没有好的解决方案,好让我能控制水印的展示情况。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文