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

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元素来捕获整个body元素。 canvas 有两种有用的方法可以做到这一点。绘制图像和toDataURL

类似于:

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