他们是否可以允许用户将他/她的图像从桌面上传到html2canvas?我想让用户在完成后将图像上传到div转换为图像,与他们上传的图像一起。我可以将div转换为图像但我无法将图像下载到我的桌面,带有外部图像。我只能在没有外部图像的情况下将图像下载到我的桌面。这个拳头脚本用于将div图像下载到桌面
var download = document.getElementById("download"),
result = document.getElementById("previewImage");
function renderContent() {
html2canvas(document.getElementById("firstshirt"), {
allowTaint: true
}).then(function(canvas) {
result.appendChild(canvas);
download.style.display = "inline"; download.href = result.children[0].toDataURL();
});
}
function downloadImage() {
}
document.getElementById("btn-Preview-Image").onclick = renderContent;
download.onclick = downloadImage
第二个是外部图像出现在div
中
var inputLocalFont = document.getElementById("file1");
inputLocalFont.addEventListener("change", previewImages, false);
function previewImages() {
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for (var i = 0; i < fileList.length; i++) {
var objectUrl = anyWindow.createObjectURL(fileList[i]);
var imgEl = $('<img src="' + objectUrl + '" width="75" height="85"/>');
$('<div class="preview-area"/>').append('<a class="remove-img"> × </a>').append(imgEl).appendTo('.container5')
.draggable();
//^ change to this
imgEl.load(function() {
$(this).resizable();
});
window.URL.revokeObjectURL(fileList[i]);
}
}
$('.container').on('click', '.remove-img', function(e) {
e.stopPropagation();
var parent = $(this).parents('.preview-area');
parent.find('img').resizable('destroy');
parent.draggable('destroy').remove();
});
当我将div下载到桌面时,是否可以显示外部图像?