Преобразуйте html в изображение и сохраните его (используйте html2canvas.js)

У меня есть большая проблема, , пожалуйста, помогите мне! Это мой код:Преобразуйте html в изображение и сохраните его (используйте html2canvas.js)

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.js"></script> 
 
    <script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
    <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> 
 
    <script type="text/javascript" src="jquery.plugin.html2canvas.js"></script> 
 

 
    <script type="text/javascript"> 
 
    $(function() { 
 
     $("#show_button").click(function() { 
 
     html2canvas(document.body, { 
 
      onrendered: function(canvas) { 
 
      $("<img/>", { 
 
       id: "image", 
 
       src: canvas.toDataURL("image/png"), 
 
       width: '95%', 
 
       height: '95%' 
 
      }).appendTo($("#show_img").empty()); 
 
      } 
 
     }); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <h1>test</h1> 
 
    <button id="show_button">Show Image</button> 
 

 
    //this is a problem 
 
    <a href="" download="dl.jpg">download</a> 
 
    <div id="show_img"></div> 
 
</body> 
 

 
</html>

Если моя точка зрения верна. Для сохранения изображения необходимо загрузить правильный путь к файлу и имя файла. И я использую html2canvas.js, конвертирую цель в изображение. Но когда я хочу сохранить изображение, я не знаю правильного пути к файлу и имени файла. (Поскольку изображение - это динамический файл, а не статический файл?) Как я могу получить правильное значение для сохранения этого изображения? Спасибо!

источник

2015-12-04 user2452153

ОК, я обнаружил, что canvas2image.js делает то, что вам нужно с этой функцией

downloadPNG = function() { 
    html2canvas(document.body, { 
    onrendered: function (canvas) { 
     Canvas2Image.saveAsPNG(canvas); 
    } 
    }); 
}

Вот скрипку

http://jsfiddle.net/link2twenty/w8Lk3znf/

источник

2015-12-04 16:09:14

Привет, спасибо своего ответа! Это очень полезно в этом вопросе. Но теперь у меня есть новый маленький вопрос. Если этот сайт предоставляет компилятору, он будет успешным. Но файл загрузки не имеет расширения имени файла, например «.png». Просто имейте имя «скачать». (Но я переименую этот файл в "download.png, он может открыться.") – user2452153

Затем я запускаю локально, он ничего не скачивает. Таким образом, я добавляю «скачать =« dl.png »» этот код в , например download. Он будет загружен, но он загрузит 2 файла, один из них «скачать», другой - «dl.png». И «dl.png» является неправильным файлом, который не может его открыть. Как загрузить файл, и файл верен (и я могу использовать другое имя для переименования имени файла.)? Мы можем решить эту проблему? Спасибо! – user2452153

Использование html2canvas будет конвертировать HTML в canvas и использовать пакеты canvas2image для преобразования canvas в изображение (или) вы можете передавать данные холста .toDataURL («image/png»);

пример:

var imagename = '<YOUR_IMAGE_NAME>'; 
var link = event.target; 
var canvasData = '<YOUR_CANVAS_DATA>'.toDataURL("image/png"); 
downloadImageFormat(link, canvasData, imagename); 
function downloadImageFormat(link, canvasData, imagename) { 
    link.href = canvasData; 
    link.download = imagename; 
}

Вот скрипка demo

источник

2016-05-18 05:44:22 Srikanth

Преобразуйте html в изображение и сохраните его (используйте html2canvas.js)

ответ

Смежные вопросы