canvas绘画blob base64

<canvas
    ref={canvas}
    width="365"
    height="365"
    style={{ cursor: "ew-resize" }}
 />

​​blob​​

const getSource = () => {
    const url =
      "https://media.emeralds.com/stone/E1526/video360/E1526-video360-041-Medium.jpg?1";
    axios
      .get(url, {
        responseType: "blob",
      })
      .then((response: any) => {
        const ctx = canvas.current!.getContext("2d");
        var image = new Image();
        const imgSrc = window.URL.createObjectURL(response.data);
        image.onload = () => {
          ctx!.drawImage(image, 0, 0, 365, 365);
        };
        image.src = imgSrc;
      })
      .catch((err) => {
        log("err", err);
      });
  };

​​arraybuffer​​

axios
      .get(url, {
        responseType: "arraybuffer",
      })
      .then((response: any) => {
        const ctx = canvas.current!.getContext("2d");
        var image = new Image();
        const imgSrc =
          "data:image/png;base64," +
          btoa(
            new Uint8Array(response.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ""
            )
          );
        image.onload = () => {
          ctx!.drawImage(image, 0, 0, 365, 365);
        };
        image.src = imgSrc;
      })
      .catch((err) => {
        log("err", err);
      });