Я пытаюсь сохранить холст как изображение в формате png с помощью response-native-canvas и реагировать-native-fs . Используя кодировку base64, я успешно сохранил холст, но размер выходного изображения отличается от установленного мной размера холста.
Я установил размер холста 100x100
, но размер выходного изображения равен 262x262
. Я попытался с другими размерами, и в результате, любой размер холста преобразуется в изображение, размер которого примерно в 2,62 раза больше размера холста. (Например, изображение размером 2520x1417
создается из холста размером 960x540
)
Как обработать холст, чтобы сохранить его в изображение правильного размера?
import React, { Component } from 'react';
import Canvas from 'react-native-canvas';
import * as RNFS from 'react-native-fs';
export default class CanvasScreen extends Component {
handleCanvas = async (canvas) => {
if (canvas !== null) {
canvas.width = 100;
canvas.height = 100;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.height, canvas.width);
const dataUrl = await canvas.toDataURL();
const imageData = dataUrl.replace(/data:image\/png;base64,/, '');
await RNFS.writeFile('/sdcard/Download/test.png', imageData, 'base64');
alert('Image saved.');
}
};
render() {
return <Canvas ref={this.handleCanvas} />;
}
}