Не может получить ViewShot для вывода качественного изображения, используя рассчитанные измеренияJavascript

Форум по Javascript
Ответить
Anonymous
 Не может получить ViewShot для вывода качественного изображения, используя рассчитанные измерения

Сообщение Anonymous »

Имея странную проблему с ViewShot в нативном приложении React, где использование вычисленного значения заставляет выходной файл очень низкое качество. Надеюсь, я смогу объяснить это достаточно хорошо, чтобы получить несколько советов о том, где искать. Например, если выход изображения должен быть 2000x1500, если я установите значения, то полученный файл в порядке (на моем устройстве тестирования соотношение пикселей составляет 1,96875, так что это означает, что мне нужно использовать значения 1016x762 для достижения правильных размеров изображения). Если я позволю коду рассчитать значения и поместить их туда, выходной файл очень низкий качество, даже если значения точно одинаковы. Я не могу исправить выходной размер, так как входные изображения могут быть любому размеру. Это сводит меня с ума, так как я не могу понять, почему это делает это. < /P>

Код: Выделить всё

{selectedImages.map((image, index) => {
// Find matching image data by uri
const imageData = imageSizes.find(item => item.uri === image.uri);

newWidth = 100;
newHeight = 100;

if (imageData?.width) {
newWidth = Math.round(imageData.width / pixelRatio);
newHeight = Math.round(imageData.height / pixelRatio);
}

return (




{'text text text'}
{imageData?.width || 0}{' x '}{imageData?.height || 0}



);
})}
< /code>
Функция вызывается со следующим компонентом < /p>
 { processImages(); }} style={styles.button}>

{`test watermark`}


< /code>
Функция обработки здесь.  Это работает, как предполагалось при условии, что вышеупомянутое правило соблюдается. < /P>
const processImages = async () => {
let processedUris = [];

for (let i = 0; i < selectedImages.length; i++) {
if (!viewRefs.current[i]?.current) {
console.warn(`Ref for image ${i} is not assigned`);
continue;
}

const watermarkedUri = await addWatermark(selectedImages[i], viewRefs.current[i]);
if (watermarkedUri) {
processedUris.push(watermarkedUri);
}
}

setWatermarkedImages(processedUris);
console.log('All images processed:', processedUris);
};

const addWatermark = async (imageUri, viewRef) => {
return new Promise(async (resolve) => {
setTimeout(async () => {
try {
const snapshot = await captureRef(viewRef.current, {
format: 'jpg',
quality: 1,
});

const fileName = `watermarked_${Date.now()}.jpg`;
const newUri = APP_CACHE + fileName;

await FileSystem.moveAsync({
from: snapshot,
to: newUri,
});

//   console.log('Saved:', newUri);
resolve(newUri);
} catch (error) {
console.error('Error capturing image:', error);
resolve(null);
}
}, 100);
});
};
исходное изображение (Dimensions 2000x1500)
Выход с фиксированным размером (размеры, установленные на 1016x762, вывод на 2000x1500)
>

Подробнее здесь: https://stackoverflow.com/questions/795 ... dimensions
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»