Question

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

  function startCanvas(e) {


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

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

            });


        }

并且当用户单击上下文菜单中的复制选项时，我必须将从诺言返回的画布上传到服务器，因为如果我将.dataurl（）直接放置到image src，则复制命令不起作用（它返回false）。我还尝试提供一个Blob网址作为image 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。

如何用足够的时间将画布复制到剪贴板以构建画布？

1 个答案: