分类 代码片段 下的文章

@Configuration
public class GlobalCorsConfig {

    /**
     * 允许跨域调用的过滤器
     */
    @Bean
    public CorsFilter corsFilter() {
        // 创建一个跨域的配置类
        CorsConfiguration config = new CorsConfiguration();
        // 允许白名单域名进行跨域调用
        // 这个是配置允许哪些域名进行跨域调用 *代表所有域名
        // 这个配置可以写多个
        config.addAllowedOrigin("*");
        // 允许跨越发送 cookie
        config.setAllowCredentials(true);
        // 放行全部原始头信息
        config.addAllowedHeader("*");
        // 允许所有请求方法跨域调用
        // 这个配置也可以写多个 POST PUT GET DELETE OPTIONS
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 访问这个项目的所有请求都会跨域调用
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

<!DOCTYPE html>
<html>
<head>
  <title>Div to Image with Width</title>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
  <div id="content" style="width: 300px; border: 1px solid #000;">
    <h1>Hello, Div to Image!</h1>
    <p>This is a simple example.</p>
  </div>

  <button id="convertButton">Convert to Image</button>

  <script>
    const convertButton = document.getElementById('convertButton');
    const contentDiv = document.getElementById('content');

    convertButton.addEventListener('click', async () => {
      const contentWidth = contentDiv.offsetWidth; // Get the width of the content div

      const canvas = await html2canvas(contentDiv, {
        width: contentWidth, // Set the canvas width to match the content div's width
      });

      // Convert canvas to image
      const image = canvas.toDataURL('image/png');

      const a = document.createElement('a');
      a.href = image;
      a.download = 'content.png';
      a.click();
    });
  </script>
</body>
</html>