將html轉換成image並保存？（使用html2canvas.js）

Question

我有大問題，請幫幫我！ 這是我的代碼：

 <!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，將目標轉換為圖像。 但是，當我要保存圖像時，我不知道正確的文件路徑和文件名。（因為圖像是動態文件，而不是靜態文件？）如何獲取正確的值來保存該圖像？ 謝謝！

Answer 1

好的，我發現使用此功能可以完成所需工作的canvas2image.js

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

這是一個小提琴

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

Answer 2

使用html2canvas它將html轉換為canvas並使用canvas2image包將canvas轉換為image（或者）您可以傳遞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;
}

這是小提琴演示

Answer 3

只需使用html2canvas 庫，只需包含插件和調用方法即可將HTML轉換為Canvas，然后下載為圖片PNG

        html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "manpower_efficiency.jpg";
            link.href = canvas.toDataURL();
            link.target = '_blank';
            link.click();
        });

來源： http : //www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

將html轉換成image並保存？（使用html2canvas.js）

問題描述

3 個解決方案

解決方案1
3 2015-12-04 16:09:14

解決方案2
0 2016-05-18 05:44:22

解決方案3
0 2018-06-08 09:40:27

將html轉換成image並保存？（使用html2canvas.js）

問題描述

3 個解決方案

解決方案1 3 2015-12-04 16:09:14

解決方案2 0 2016-05-18 05:44:22

解決方案3 0 2018-06-08 09:40:27

解決方案1
3 2015-12-04 16:09:14

解決方案2
0 2016-05-18 05:44:22

解決方案3
0 2018-06-08 09:40:27