如何将画布复制到剪贴板，并有足够的时间来构建画布？

Question

我有一个上下文菜单，当用户点击上下文菜单按钮时，我开始使用html2canvas库渲染html，它使用promise返回画布，

  function startCanvas(e) {


            CanvasPromise = html2canvas($TableDivCanvas.get(0), {

                height: html2canvasHeight + 20,
                width: html2canvasWidth + 20,

            });


        }

当用户从上下文菜单中单击复制选项时，我必须将从promise返回的画布上传到服务器，因为如果我将.dataurl（）直接放到image src，则copy命令不起作用（它返回错误）。我也试过提供一个blob url作为图像src，但也没有用。

 $(document).on('click','.imageCopy',function(e){

            CanvasPromise.then(function (canvasElm) {
                    CanvasDataString = canvasElm.toDataURL("image/png", 1.0);

                    var urlHeading = Heading + Date.now() + ".png";
                    urlHeading = urlHeading.replace(/ +/g, "");

                    var formdata = new FormData();
                    formdata.append("base64image", CanvasDataString);
                    formdata.append("heading", urlHeading);
                    $.ajax({
                        url: "@Url.Action("SaveCanvas")",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (url) {

                        }   

                    });
                    url2 = document.location.origin + '/Upload/Images/' + urlHeading;

                    var img = document.createElement('img');
                    var div = document.createElement('div');
                    div.classList.add("CanvasimgDiv");
                    div.contentEditable = true;

                    div.appendChild(img);
                    img.src = url2;
                    document.body.appendChild(div);


                    try {

                        var selection = window.getSelection();
                        var range = document.createRange();
                        range.selectNodeContents($(".CanvasimgDiv").get(0));
                        selection.removeAllRanges();
                        selection.addRange(range);
                        var str = document.execCommand('copy');
                        console.log(str);
                        if (str == false) {
                            alert("Failed to copy image, Please close the menu and try again");
                        }
                        window.getSelection().removeAllRanges();
                        $('.CanvasimgDiv').remove();
                        $('.hiddClone').remove();

                    } catch (err) {
                        if (str == false) {
                            alert("Failed to copy image, Please close the menu and try again");
                        }
                        console.log(err);
                        $('.CanvasimgDiv').remove();

                    }
                })

我在这里唯一的问题是关于时间，如果html2canvas花费超过1秒来渲染画布，复制命令就会失败。

Answer 1

您可以使用navigator.clipboard.writeText()将data URL写入剪贴板，然后在用户操作后调度的处理程序中执行异步代码。