Часть содержимого iframe как изображение [дубликат]

Сделайте что-то вроде этого:

A <div> с идентификатором #imageDIV, еще один с ID #download и скрытый <div> с идентификатором #previewImage.

Включите последнюю версию jquery и jspdf.debug.js из jspdf CDN

Затем добавьте этот скрипт:

var element = $("#imageDIV"); // global variable
var getCanvas; // global variable
$('document').ready(function(){
  html2canvas(element, {
    onrendered: function (canvas) {
      $("#previewImage").append(canvas);
      getCanvas = canvas;
    }
  });
});
$("#download").on('click', function () {
  var imgageData = getCanvas.toDataURL("image/png");
  // Now browser starts downloading it instead of just showing it
  var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
  $("#download").attr("download", "image.png").attr("href", newData);
});

The div будет сохранен как PNG при нажатии кнопки #download