ダウンロードする画像にHTMLコードや画像データを含むデータを変換する方法

私のウェブサイトにダウンロードする画像としてHTMLコードをレンダリングしたい。私はテキストのイメージを作成するために正常に動作しているhtml2canvasを使用していますが、html div、img、text、paragraphからイメージを作成します。私は画像ダウンロードする画像にHTMLコードや画像データを含むデータを変換する方法

<!DOCTYPE html> 
<html> 
<head lang="en"> 



</head> 
<body> 
<div><h1>HTML content to render:</h1> 

    <div id="content"> 
     <img src="./images/127597554.jpg" height="200" width="200"> 
     Hello <strong>visiting</strong> guest 
    </div> 

</div> 
<h1>Existing canvas:</h1> 
<canvas width="500" height="200"></canvas> 
<script type="text/javascript" src="../dist/html2canvas.js"></script> 
<button>Run html2canvas</button> 
<script type="text/javascript"> 
    var canvas = document.querySelector("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var ctx = canvas.getContext('2d'); 
document.querySelector("button").addEventListener("click", function() { 
     html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) { 
      console.log('Drew on the existing canvas'); 
     }); 
    }, false); 

</script> 
</body> 
</html>

にHTMLをレンダリングするためのコードの下に使用しています

私は、私は、コードを使用して、これをachiveしたいlimit.Soを画像をachiveするために、いくつかのサードパーティのAPIを試みたが、彼らのです。どうすればこの問題を解決できますか？

は、私は以下のcaodeの画像が欲しい

<div><h1>HTML content to render:</h1> 

    <div id="content"> 
     <img src="./images/127597554.jpg" height="200" width="200"> 
     Hello <strong>visiting</strong> guest 
    </div> 

</div>

私はこの

出典

2016-07-30 Sunil Bhawsar

使用rasterizeHTML.jsのような結果を取得したい：

：例から

<canvas id="canvas" width="400" height="200"></canvas> 
<script type="text/javascript"> 
    var canvas = document.getElementById("canvas"); 

    rasterizeHTML.drawHTML(
     '<div><h1>HTML content to render:</h1>' + 
     ' <div id="content">' + 
     '  <img src="./images/127597554.jpg" height="200" width="200">' + 
     '  Hello <strong>visiting</strong> guest' + 
     ' </div>' + 
     '</div>', 
     canvas); 
</script>

それともクライアント上でレンダリングを行うことの主な利点は、HTMLがユーザーであることをしている

Canvas2Image.saveAsPNG(canvas, width, height);

：

rasterizeHTML.drawURL("http://example.net", canvas);

（隠されたキャンバス付き）画像を使用canvas2imageをダウンロードしますサーバーはイメージをレンダリングする必要はありません。

出典

2016-07-30 12:50:12

htmlをキャンバスにレンダリングするためにsvgに埋め込むことができます。

HTML：

<canvas id="canvas" style="border:2px solid black;" width="160" height="43"></canvas>

JS：

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + 
      '<foreignObject width="100%" height="100%">' + 
      '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' + 
       '<em>I</em> like ' + 
       '<span style="color:white; text-shadow:0 0 2px blue;">' + 
       'SO</span>' + 
      '</div>' + 
      '</foreignObject>' + 
      '</svg>'; 

var DOMURL = window.URL || window.webkitURL || window; 

var img = new Image(); 
var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' }); 
var url = DOMURL.createObjectURL(svg); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    DOMURL.revokeObjectURL(url); 
} 

img.src = url;

フィドル：https://jsfiddle.net/qkvu7fmL/

誰かが追加してくださいknows-場合、私は、この例 - の元のソースへの参照を見つけることができませんでしたコメントとしてのクレジット

出典

2016-07-30 14:30:00 Wolfgang

ダウンロードする画像にHTMLコードや画像データを含むデータを変換する方法

答えて

関連する問題