保存使用 Konva 编辑的照片时如何修复 IE 错误？答案

【问题标题】：How to fix IE error when save photo edited with Konva?保存使用 Konva 编辑的照片时如何修复 IE 错误？
【发布时间】：2019-10-25 14:27:30
【问题描述】：

我正在尝试制作照片编辑器，请使用 Konva JS 在图像上添加一些正方形。我能够为所有浏览器完成任务，但不幸的是 IE 无法弄清楚。当我试图保存编辑后的图像时，似乎它忽略了 Konva（正方形）的所有内容，而不仅仅是拉伸图像。我问过 Konva 版主是否支持 IE，他告诉我该库与 IE 兼容。

应用程序是在 Laravel 中制作的，保存请求由 Ajax 在控制器中发送

Javascript：

 function saveInCanvas () {
            destroyTransformer();
            destroyPreview();
            html2canvas(element, {
                onrendered: function (canvas) {
                    $("#previewImage").append(canvas);
                    getCanvas = canvas;
                    var keyFrameId = $('#current-frame').attr('attr');
                    destroyTransformer();

                    dataURL = getCanvas.toDataURL();
                    $.ajax({
                        type: "POST",
                        url: "{{ route('save_debrand') }}",
                        data: {
                            survey_id: {{ $survey->id }},
                            imgBase64: dataURL,
                            keyFrameId: keyFrameId,
                            _token: "{{ csrf_token() }}",
                        },
                        success: function(response){
                            debrandingPreviousNextImage("imageSaved");
                        }
                    });
                }
            });
        };

控制器：

public function ajxSaveEdited(Request $request){

    $image    = Image::make($request->get('imgBase64'));
    $filename = uniqid().'.jpg' ;
    $file     = public_path('storage/surveys/'.$filename);
    $image->save($file);

}

IE 有什么特别的东西可以从画布中获取图像吗？谢谢！

【问题讨论】：

你说的是哪个版本的IE？
关于 IE 11。
这里为什么需要html2canvas？您节省的不仅仅是画布吗？其他 DOM 元素？
是的，需要编辑的是图像。

标签： javascript php laravel konvajs

【解决方案1】：

我已经解决了这个问题，我只是为动态附加到 div 的画布应用了一个 z-index（这是 Konva 创建画布的方式）

【讨论】：