无需安装Node.js在Elixir .leex中调用JS实现HTML转图片的方案问询

你需要的能力完全不需要服务端安装Node.js，html2canvas本身是客户端运行的JS库，所有转换逻辑都可以在用户浏览器侧执行，仅需将最终生成的图片比特串传回Elixir后端处理即可，具体落地方案如下：

实现步骤 #

• 引入html2canvas依赖
  提前将html2canvas的最小化JS源码下载后放到项目priv/static/js目录下，在你的.leex模板中引入本地静态资源即可：

  <script src={Routes.static_path(@conn, "/js/html2canvas.min.js")}></script>
  

• 标记待转换的DOM区域
  给需要转换为图片的HTML节点设置唯一ID，方便JS定位：

  <div id="capture_target">
    <!-- 此处为需要转成图片的所有内容 -->
  </div>
  <button id="trigger_convert">生成图片</button>
  

• 编写客户端转换逻辑
  在leex模板底部嵌入JS代码，调用转换逻辑后可直接将生成的图片比特串传给后端：

  document.querySelector('#trigger_convert').addEventListener('click', async () => {
    const targetEl = document.querySelector('#capture_target');
    // 调用html2canvas生成画布
    const canvas = await html2canvas(targetEl, {
      useCORS: true, // 存在跨域图片时需开启
      scale: 2 // 调整输出图片清晰度，数值越大精度越高
    });
    // 生成base64格式的图片比特串，也可根据需求转为Blob格式
    const imageBitStr = canvas.toDataURL('image/png');
    
    // 若使用Phoenix LiveView，直接推送事件到后端
    liveSocket.pushEvent("image_converted", {image_data: imageBitStr});
    // 若为普通静态页面，可通过fetch提交到后端接口
    // fetch("/api/receive_image", {
    //   method: "POST",
    //   headers: {"Content-Type": "application/json"},
    //   body: JSON.stringify({image_data: imageBitStr})
    // })
  })
  

• 后端接收并处理图片数据
  Elixir侧拿到base64编码的图片内容后，解码即可得到原始二进制图片数据：

  # LiveView事件处理示例
  def handle_event("image_converted", %{"image_data" => "data:image/png;base64," <> base64_content}, socket) do
    image_binary = Base.decode64!(base64_content)
    # 此处可根据需求做存储、生成下载链接、返回给前端等后续处理
    {:noreply, socket}
  end
  

注意事项 #

• 如果使用Phoenix LiveView，推荐将JS逻辑封装为Phx.Hook，避免DOM更新后事件绑定失效，更符合框架最佳实践。
• 若待转换内容包含跨域静态资源，需要给对应资源配置CORS响应头，否则会导致html2canvas转换失败。
• 该方案所有转换逻辑都在客户端执行，完全不需要服务端安装Node.js，也不需要调用服务端的JS运行时。

内容的提问来源于stack exchange，提问作者William Ross