允许桌面图像出现在div下载中

时间:2016-12-17 23:35:11

标签: javascript jquery html image

他们是否可以允许用户将他/她的图像从桌面上传到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"> &times; </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下载到桌面时,是否可以显示外部图像?

0 个答案:

没有答案