暗水印在某些机型下无法解析

[DXXQ]

以前的Issues

问题描述

我的页面是在端内的h5页面，做了暗水印和明水印同时加载的功能，但在某些机型下截出来的图暗水印无法解析出来
测试结果：
IOS：iPhone的测了XR、Xs Max、15 Plus还有云真机iPhone 11这四个机型，只有15 Plus能看到暗水印，其他看不到
安卓：的测了以下几个机型，暗水印明水银都可以看到
华为：nova 8 Pro、 Mate 50 Pro、 Mate 40、荣耀Magic4、BVL-AN00荣耀Magic61
OPPO：PEHM00、PFFM10
小米：Mi11
realme：RMX3161
PS：有尝试过在无法解析的机型下使用浏览器进入页面并且截图进行解析，依旧无法看到暗水印

复现步骤

环境详情

• watermark-js-plus version:
• vue version:
• react version:
• react-dom version:

[zhensherlock]

会不会是手机截图传输到电脑的过程中，被压缩了，导致看不到？

[DXXQ]

以上测试的机型我们都是使用相同的方式进行传输，截屏->传输原图->下载原图解析

[zhensherlock]

解析后的图片是完全看不到水印还是水印文字很糊

[DXXQ]

完全看不到，并且暗水印的加载时机是跟明水印在一块的，我理解应该不会存在暗水印初始化失败的问题吧

[zhensherlock]

https://stackblitz.com/edit/vue2-vite-starter-tqptvp?file=src%2FApp.vue
看下这个DEMO，明水印和暗水印的文字最好错开

[DXXQ]

刚才尝试了下把明水印初始化关掉，暗水印初始化加了上面示例中的参数还是无法解析（><）

[zhensherlock]

方便贴下代码吗？或者在stackblitz中重现下

[DXXQ]

import { BlindWatermark } from 'watermark-js-plus';
import { WatermarkExtend } from '../types/common';
import Watermark from 'watermark-plus'

export const showWatermark = (extend: WatermarkExtend) => {
if (extend.content) {
// 暗水印
new BlindWatermark(
{
content: extend.content,
parent: '#main',
fontSize: extend.fontSize + 'px',
fontColor: extend.color,
width: 150,
height: 150,
layout: 'grid',
gridLayoutOptions: {
rows: 2,
cols: 2,
gap: [20, 20],
matrix: [
[1, 0],
[0, 1],
]
},
}).create()
// 明水印
// new Watermark(extend).create();
}
};

export default {
showWatermark,
};

showWatermark这个方法是在页面数据接口请求后会调用

[zhensherlock]

目前发现，在某些iphone下透明度小于0.01的canvas，无法显示，我在iphone6下透明度设置成0.01556014968082308683，肉眼能看到水印，但是设置0.01556014968082308682，肉眼看不到水印后，也无法解析水印。

[DXXQ]

好的 了解 辛苦了