Laravel 公共图像 CORS 问题与 Angular Canvas 结构 js canvas.toDataURL() 问题 受污染的画布可能无法导出

如何解决Laravel 公共图像 CORS 问题与 Angular Canvas 结构 js canvas.toDataURL() 问题 受污染的画布可能无法导出

我有： Angular 版本 11.0.5。

Laravel 版本 8.18.1。

对于 Canvas，我使用了 Fabricjs

"fabric": "^4.3.1","@types/fabric": "^4.2.2"

对于laravel CORS：我用过

"fruitcake/laravel-cors": "^2.0",

这里是 Laravel 配置：

内核.PHP

protected $middleware = [
        \Fruitcake\Cors\HandleCors::class,];
protected $middlewareGroups = [
        'web' => [
           
        ],'api' => [
            'throttle:api',\Fruitcake\Cors\HandleCors::class,],];

config/cors.PHP

'paths' => ['api/*','sanctum/csrf-cookie','images/*'],'allowed_methods' => ['*'],'allowed_origins' => ['*'],'allowed_origins_patterns' => [],'allowed_headers' => ['*'],'exposed_headers' => [],'max_age' => 0,'supports_credentials' => false,

在绘制画布时，我也能够访问所有 API/ 和图像。但无法使用 toDataURL() 将画布另存为图像；

我尝试了这里给出的 Laravel 的每一个解决方案： here 和 here

截至目前，我使用 laravel 服务器作为本地主机

PHP artisan serve

所以我通过添加 htaccess 来尝试每个解决方案。 尝试通过在 public/.htaccess 和 public/images/.htaccess 更新 htaccess。 我的所有图片都位于 public/images/:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
       <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
          SetEnvIf Origin ":" IS_CORS
          Header set Access-Control-Allow-Origin "*" env=IS_CORS
       </FilesMatch>
    </IfModule>
 </IfModule>

from here

我尝试过的另一种选择：

<Location "/public/images/*">
     Header set Access-Control-Allow-Origin "*"
</Location>

From Here

这是Angular代码：

drawing.component.html

<div id="designCanvasContainer" class="designCanvasContainer">
     <canvas id="designer"></canvas>
</div>

<img crossOrigin="anonymous" class="images" [src]="image_file_url_of_server" (click)="updateImage(image_file_url_of_server)" />

** 如果我在这里使用 crossOrigin="anonymous" 那么它会给我一个错误。 **

绘图.component.ts

import { fabric } from 'fabric';
import 'fabric-history';

@Component({
  selector: 'app-studioBox',templateUrl: './drawing.component.html',styleUrls: ['./drawing.component.scss']
})
export class DrawingComponent implements OnInit,AfterViewInit {
  loadCanvas(jsonData): void {
      this.canvas = new fabric.Canvas('designer');
      this.canvas._historyInit();
      if(jsonData && jsonData != ""){ //This is for create and edit template (I save canvas as json at server side,which is working fine.
          this.canvas.loadFromJSON(jsonData,function(objects) {
          });
      }
      this.canvas.renderAll();
   }
}
//Here i able to access and draw image on click of image from html
updateImage(imageURL): void{
      let that = this;
      fabric.Image.fromURL(imageURL,function(image) {
        image.scaletoHeight(image.height);
        image.scaletoWidth(image.width);
        that.canvas.centerObject(image);
        that.canvas.add(image);
        that.canvas.renderAll();
      });
      // I also tried by adding the below code but the same CORS issue. As it's from server side,it's not angular issue
         //var img= new Image();
         //img.setAttribute('crossOrigin','anonymous');
         //img.src = url;
         //here used img.onload and tried to draw the canvas but crossOrigin issue is still
 }
 saveCanvas() {
    var dataURL = this.canvas.toDataURL("image/jpeg");
 }

将画布另存为图像时出错：

我完全被困在这里。帮助表示赞赏。 谢谢。