web保存分享图片并保存的图片附带后端提供的地址生成的二维码Canvas画布实现及非画布实现保存二维码

首先需要html2canvas 这个库：http://html2canvas.hertzen.com/

因为前端框架是react，下载了html2canvas库后接下来上代码

import html2canvas from 'html2canvas';
import SharePoster from '@/pages/share/index';

const [shareLink, setShareLink] = useState('');

//获取后台url
 useEffect(() => {
    const fetchShareLink = async () => {
      try {
        const res = await request.get(`/api/client/lessons/lesson/share-url?lesson=${lessonID ? lessonID : ''}`)
        setShareLink(res.share_url)
      } catch (error) {
        toast.fail('获取分享链接失败,请刷新重试')
        console.log(error)
      }
    }
    if (token) {
      fetchShareLink()
    }
  }, [token]);

//生成图片的方法
const saveImage = async () => {
    try {
      const canvas = await html2canvas(document.getElementById('share-poster'), { useCORS: true })
      let elem = document.createElement("a");
      elem.href = canvas.toDataURL("image/png");;
      elem.download = "image.png";
      elem.click();
    } catch (error) {
      console.log(error)
    }
  }

return (

	{!--生成二维码的组件--}
	
	{!--保存图片的按钮--}
	

        保存分享图片到本地
    

)

//生成二维码的组件

import React, { useState } from 'react';
import './style.less';
import { useSelector } from 'react-redux';
import QRCode from 'qrcode.react';

const SharePoster = ({ inviteURL }) => {
  const profile = useSelector(state => state.user.profile);
  const statistics = useSelector(state => state.user.statistics);

  return (
    

      

        

          
        
      
      

        
        

          

            

              
            
            
{profile.nickname}
            
已在奥比编程
            

              

                学习
                25
                天
              
              

                
                
              
            
            

              

                完成作品
                12
                个
              
              

                
                
              
            
          
          

            
送你1个月VIP会员
            
邀你与我一起学习
          
        
      
      

        

          
{profile.nickname}
          
推荐你加入奥比编程
          
长按扫码，领取VIP会员
        
        

          
          
        
      
    
  );
}

export default SharePoster;

// const Personal = ({user}) => {
//   const [qrSize, serQrSize] = useState(64);
//   const [qrIcon, setQRIncon] = useState(0);
//   const [inviteURL, setInviteURL] = useState('http://www.baidu.com');

//   // 计算二维码和icon尺寸
//   // useEffect(() => {
//   //   const width = document.body.clientWidth;
//   //   serQrSize(width * 0.228);
//   //   setQRIncon(width * 0.03);
//   // }, [document.body.clientWidth]);
//   // 设置邀请链接

//   // useState(() => {
//   //   const URL = `${
//   //     window.location.origin
//   //   }/receive?from=${'3213543'}&invite=qrcode`;
//   //   setInviteURL(URL);
//   // }, []);

// };

// export default Personal;

react框架可用，仅作参考

非画布实现二维码下载

  const ClickDownLoad = () => {
  const saveImage = async () => {
    try {
      var Qr = document.getElementById('qrId');
      let image = new Image();
      image.src = Qr.toDataURL("image/png");
      console.log(image)
      var a_link = document.getElementById('aId');
      a_link.href = image.src;
      a_link.download = 'obbycode';
    } catch (error) {
      console.log(error)
    }
}

jsx:

 

        

          {
    	
          }
        

  

          保存分享图片到本地
          {/* 保存分享图片到本地 */}
          保存分享图片到本地
        
        

          每邀请一个好友成功注册并登陆