问题描述
我有: 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,],];
'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>
我尝试过的另一种选择:
<Location "/public/images/*">
Header set Access-Control-Allow-Origin "*"
</Location>
这是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");
}
将画布另存为图像时出错:
我完全被困在这里。帮助表示赞赏。 谢谢。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)