获取 HTML 并使用 rasterizehtml 在画布中生成图像 - 动态源图像答案

【问题标题】：get HTML and generate an IMAGE in canvas with rasterizehtml - dynamic source image获取 HTML 并使用 rasterizehtml 在画布中生成图像 - 动态源图像
【发布时间】：2021-06-22 16:31:41
【问题描述】：

我尝试为画布/图像生成多层 HTML 内容

底层是图片
顶层其他内容

这是我的 JS 小提琴： https://jsfiddle.net/rako87/b3qhLm5u/7/

我的问题是，当我更改底层图像源时，它不会反映在渲染的画布上（始终渲染原始 HTML 值）

当我用反映在渲染的 IMG 上的 JS 更改 img src 时，我怎么能做到这一点？？

谢谢！

JS：

// IMG dropdown select
var selectBox = document.getElementById('selectBox');
var theImg = document.getElementById('theImg');

selectBox.addEventListener('change', function() {
  theImg.src = this.options[this.selectedIndex].value
}, false);

// Generate IMG to canvas with button click
var canvas = document.getElementById("canvas"),
  context = canvas.getContext('2d'),
  html_container = document.getElementById("thehtml"),
  html = html_container.innerHTML;

$(function() { 
        $("#btnGEN").click(function() { 
            rasterizeHTML.drawHTML(html).then(function (renderResult) {
                context.drawImage(renderResult.image, 0, 0);
            });
        });
    });

【问题讨论】：

为什么？ html2canvas.hertzen.com 不正是你想要的吗？
为了回答您的问题，可能有几种方法可以做您想做的事情...考虑创建一个“新上下文”，然后将所有内容重新绘制到该新上下文中 - 如果我理解问题。这意味着您会将 var canvas = ..., context = ..., html_container = ..., html = ... 移动到 jquery .click 事件侦听器中。
奇怪的 rasterizeHTML 没有在你的脚本中定义，在 jfiddle 中工作，但是当我尝试在 SO 中添加一个可运行的代码 sn-p 时，它说它没有定义。
我在 jsFiddle 的“资源”下添加了 rasterizehtml.js。

标签： javascript html image canvas

【解决方案1】：

我不知道下面的代码 sn-p 是怎么回事（错误：rasterizeHTML.allinone.js:11 Uncaught (in promise) TypeError: Cannot read property 'open' of null），但是当我在你的 jsfiddle 中使用代码的 javascript 部分时，我认为它完成了你想要的。

// IMG dropdown select
var selectBox = document.getElementById('selectBox');
var theImg = document.getElementById('theImg');

selectBox.addEventListener('change', function() {
  theImg.src = this.options[this.selectedIndex].value
}, false);


$(function() {
        $("#btnGEN").click(function() {
          // Generate IMG to canvas with button click
            var canvas = document.getElementById("canvas"),
            context = canvas.getContext('2d'),
            html_container = document.getElementById("thehtml"),
            html = html_container.innerHTML;
            rasterizeHTML.drawHTML(html).then(function (renderResult) {
                context.drawImage(renderResult.image, 0, 0);
            });
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.3.0/rasterizeHTML.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.3.0/rasterizeHTML.allinone.js"></script>
<table style="width:100%">
  <tr>
    <th width="300px">HTML</th>
    <th width="300px">Rendered IMG</th> 
  </tr>
  <tr>
    <td>
    
    <p>1.Select source img: </p>
    <select id="selectBox">
        <option value="https://dummyimage.com/200x200/1d83b3/ffffff.jpg&text=+">Blue</option>
        <option value="https://dummyimage.com/200x200/1f995a/ffffff.jpg&text=+">Green</option>
    </select>   <br/><br/>
    
    <p>2.Click Button to Generate img to canvas: </p>
    <button type="button" id="btnGEN" >Generate</button><br/>

    <br/>
    

   <div id="thehtml" style="position:relative;">
      <style>
          .test {
            font-size: 22px;    
          }
      </style>
    
   
      <div style="z-index:0; position:absolute;">
        <img id="theImg" src="https://dummyimage.com/200x200/1d83b3/ffffff.jpg&text=+">
      </div>
      
      <div style="z-index:1; position:absolute;">
        <h2> TEST TEXT </h2>
      </div>
      
    </div>

  
    </td>
    <td><canvas id="canvas" width="220" height="220" style="border: 1px solid black;"></canvas></td>
  </tr>
</table>

【讨论】：