制作一个按钮来截取屏幕截图并将其保存到照片库中

Question

这是我想截取屏幕截图并保存到照片库中的以下代码。

<TouchableOpacity 
style={styles.menuBtnCluster} 
onPress={() => {
RNViewShot.takeSnapshot(viewRef, {
format: "jpeg",
quality: 0.8
}).then(
uri => console.log("Image saved to", uri),
error => console.error("Oops, snapshot failed", error)
)}
}
>
<MaterialIcons name="save" size={24} color="#fff" />
<Text style={styles.testText}>Gem</Text>
</TouchableOpacity>

Answer 1

您可以使用 canvas 元素来捕获整个正文元素。 canvas 有两种有用的方法可以做到这一点。 drawImage 和 toDataURL

像这样：

let context = document.getElementById('myCanvasElement').getContext('2d');
downloadElement = document.getElementById('myAncorElement');
context.drawImage(document.body, ...);
downloadElement.href = canvasElement.toDataURL("image/png");