У меня есть контекстное меню, в котором, когда пользователь нажимает кнопку контекстного меню, я начинаю отображать HTML, используя библиотеку html2canvas , которая возвращает холст с использованием обещания,
function startCanvas(e) {
CanvasPromise = html2canvas($TableDivCanvas.get(0), {
height: html2canvasHeight + 20,
width: html2canvasWidth + 20,
});
}
и когда пользователь щелкает опцию копирования из контекстного меню, я должен загрузить холст, возвращенный из обещания, на сервер, потому что, если я помещаю .dataurl () непосредственно в image src, команда копирования не работает (она возвращаетложный ).Я также попытался предоставить 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 секунды для рендеринга холста,команда копирования не выполняется.