Question

我正在尝试保存包含图像的画布。我尝试使用toDataURL，但在这种情况下不起作用。画布是用来在其中输入图像的作品。

HTML

 <FlatList
    data={enteredString}
    keyExtractor={(item, index) => item.id}
    renderItem={(itemData) => (
      <View style={styles.listStyle}>
        <Text>{itemData.item.value}</Text>
      </View>
    )}
  />

JS

<img src="bg.png" id="toIMG" />
<canvas></canvas>
<img alt="UNCHANGED" id="getCtx">
<span>Why does the img doesn't change?</span>

Answer 1

加载窗口之后，请运行该函数，而不是在加载窗口时运行该函数。另外，正如@CrissCrossCrass指出的那样，toDataURL是一种画布方法，而不是上下文方法。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <img
      id="toIMG"
      src="https://source.unsplash.com/random/120x120"
      crossorigin="anonymous"
    />
    <canvas></canvas>
    <img id="getCtx" />
    <script>
      var c = document.querySelector("canvas");
      var img = document.getElementById("toIMG");
      var img2 = document.getElementById("getCtx");
      var ctx = c.getContext("2d");
      img.onload = function() {
        c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img, 0, 0, c.width, c.height);
        img2.src = c.toDataURL("image/png");
      };
    </script>
  </body>
</html>

此外，您可能希望将第一个img元素的crossOrigin属性设置为anonymous，以避免画布受到污染。 Read more about it

Answer 2

我尝试过，实际上它正在工作。如果控制台出现任何错误，则共享。然后，我将根据它更新答案。

如何保存包含图像的画布？

2 个答案: