react中使用canvas，将canvas区域保存成图片

react中使用canvas，将canvas区域保存成图片

import React, { useEffect, useRef } from "react";

function Canvas() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

    const image = new Image();
    image.src =
      "https://img1.baidu.com/it/u=3573056321,2239143646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500";
    //   由于浏览器的安全限制，使用CORS来允许从其他域加载图像
    image.setAttribute("crossOrigin", "Anonymous");
    image.onload = () => {
      context.drawImage(image, 0, 0);
    };
  }, []);

  //   //  如果不需要考虑浏览器兼容性问题，直接创建a标签实现下载
  //   const handleDown = () => {
  //     const imageUrl = canvasRef.current.toDataURL("image/png"); //base64位图片
  //     const link = document.createElement("a");
  //     link.download = "sunflower.png";
  //     link.href = imageUrl;
  //     // 使用MouseEvent来创建一个新的点击事件，用dispatchEvent来触发这个事件
  //     const clickHandler = new MouseEvent("click");
  //     link.dispatchEvent(clickHandler);
  //   };

  //  要兼容各浏览器，使用如下方式：
  //  有的电脑浏览器不支持base64格式的图片下载,则将base64位图片转换成Blob对象
  const handleDown = () => {
    //将canvas保存为base64位图片
    const imageUrl = canvasRef.current.toDataURL("image/png");
    const blob = base64ToBlob(imageUrl); // 将base64位图片转换为Blob
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "sunflower.png";
    // 使用MouseEvent来创建一个新的点击事件，用dispatchEvent来触发这个事件
    const clickHandler = new MouseEvent("click");
    link.dispatchEvent(clickHandler);
  };

  // 将base64位图片转换为Blob
  const base64ToBlob = (base64) => {
    const arr = base64.split(",");
    const mime = arr[0].match(/:(.*?);/)[1]; // 图片类型
    const bstr = atob(arr[1]); // 把base64字符串转换为byte数组
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  };

  return (
    <div>
      <canvas ref={canvasRef} width={800} height={500}></canvas>
      <button onClick={handleDown}>下载</button>
    </div>
  );
}

export default Canvas;

下方是我微信公众号的二维码，关于react及其他相关知识点会在公众号上面更新，可以扫码关注以下，有什么问题也可以通过公众号跟我留言哦