如何使带有文本的 html div 图像可供用户下载/保存？答案

【问题标题】：How to make html div with text over image downloadable/savable for users?如何使带有文本的 html div 图像可供用户下载/保存？
【发布时间】：2015-10-12 18:44:38
【问题描述】：

我有一个 div，它获取用户图像并在其上放置用户文本。我的目标是让用户在看到预览并根据自己的喜好自定义图像/文本后，能够通过单击按钮下载或保存图像。这可能吗？这是我的代码：（我是 html/css 新手，所以请原谅丑陋的格式/方法）

HTML：

<script `src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>`

<p>DOM-rendered</p>
<p>&nbsp;</p>

<div id="imagewrap" class="wrap" style="border-style: solid;">
  <img src="../images/environment.gif" id="img_prev" width="640" height="640" />
  <h3 class="desc">Something Inspirational</h3>
</div>

<div id="canvasWrapper" class="outer">
  <p>Canvas-rendered (try right-click, save image as!)</p>
  <p>Or, <a id="downloadLink" download="cat.png">Click Here to Download!</a>
</div>

CSS：

.desc {
text-align: center;
}

.outer, .wrap, .html2canvas, .image_text {
  display: inline-block;
  vertical-align: top;
}
.wrap {
  text-align: center;
}
#imagewrap {
  background-color: white;
}

JavaScript：

window.onload = function() {
html2canvas(document.getElementById("imagewrap"), {
onrendered: function(canvas) {
  canvas.className = "html2canvas";
  document.getElementById("canvasWrapper").appendChild(canvas);
  var image = canvas.toDataURL("image/png");
  document.getElementById("downloadLink").href = image;
},
useCORS: true
});
}

function changePicture(image) {
    var at = $(image).attr('at');
    var newpath = '../images/' + at;
    $("#img_prev").attr('src', newpath);
}


function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#img_prev')
          .attr('src', e.target.result)
          .width(640)
          .height(640);
      };
      reader.readAsDataURL(input.files[0]);
    }
  };


  $(document).on("click", '.font-names li a',  function() {    
      $("#imagewrap h3").css("font-family", $(this).parent().css("font-family"));
      $("#new_tile_font_style").val($(this).parent().css("font-family"));
   });


  $(document).on("click", '.font-sizes li a',  function() {    
      $("#imagewrap h3").css("font-size", $(this).parent().css("font-size"));
      $("#new_tile_font_size").val($(this).parent().css("font-size") + "px");
    });


  $(document).on("click", '.font-colors li a',  function() {    
      $("#imagewrap h3").css("color", $(this).parent().css("color"));
      $("#new_tile_font_color").val($(this).parent().css("color"));
    });


  $("#new_tile_quote").on('keyup', function() {
   var enteredText = $("#new_tile_quote").val().replace(/\n/g, "<br>");
    $("#imagewrap h3").html(enteredText);
    });

【问题讨论】：

是的，这是可能的，但不能使用 HTML/CSS/JS。您需要一种服务器端语言来创建图像并允许下载它。
我对这个概念不熟悉，您能详细说明一下吗？ - 也感谢您的快速响应。
您可以使用 HTML5 Canvas 做到这一点。见this article for an overview。
@ScottMyers 他指的是一个 Html->图像转换器服务器端软件。您将 HTML 代码发送到转换器，它会从中创建图像，然后将其发送回给您。您可以通过 AJAX 完成所有操作。不过，在现代浏览器时代还有其他选择。
这是一个很好的起点4rapiddev.com/php/download-image-or-file-from-url

标签： javascript html css save-image

【解决方案1】：

您想要完成的工作完全可以仅使用 HTML、JS 和 CSS，而无需服务器端代码。这是一个简化的演示，它使用 html2canvas library 将整个 DOM 元素呈现到画布上，然后用户可以在画布上下载它。

请务必点击演示中的“整页”，以便查看整个内容！

window.onload = function() {
  html2canvas(document.getElementById("imagewrap"), {
    onrendered: function(canvas) {
      canvas.className = "html2canvas";
      document.getElementById("canvasWrapper").appendChild(canvas);
      var image = canvas.toDataURL("image/png");
      document.getElementById("downloadLink").href = image;
    },
    useCORS: true
  });
}

.desc {
  text-align: center;
}
.outer, .wrap, .html2canvas, .image_text {
  display: inline-block;
  vertical-align: top;
}
.wrap {
  text-align: center;
}
#imagewrap {
  background-color: white;
}
#wow {
  color: red;
  display: block;
  transform: translate(0px, -12px) rotate(-10deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="outer">
  <p>DOM-rendered</p>
  <p>&nbsp;</p>
  <div id="imagewrap" class="wrap" style="border-style: solid;">
    <img src="https://i.imgur.com/EFM76Qe.jpg?1" id="img_prev" width="170" />
    <h3 class="desc">Something <br /><span style="color: blue;">Inspirational</span></h3>
    <span id="wow">WOW!</span>
  </div>
</div>
<div id="canvasWrapper" class="outer">
  <p>Canvas-rendered (try right-click, save image as!)</p>
  <p>Or, <a id="downloadLink" download="cat.png">Click Here to Download!</a>
</div>

【讨论】：

谢谢，这几乎可以完美运行。唯一的问题是，就我而言，会有用户通过 javascript 函数实时更新和更改图像。我怎样才能让用户下载最新版本的图像？就像重新渲染功能一样。对不起，我是菜鸟。是否也可以不显示渲染版本只使其可供下载？我已经更新了上面的代码，所以你可以看到我正在使用什么。
@ScottMyers 要持续重新渲染，每次用户进行更改时，请从您的代码中调用 html2canvas 函数，并在 onrendered 函数中检查输出画布是否已存在，如果是这样，在追加新的之前删除它（使用类似canvas.parentNode.removeChild(canvas) 的东西）。如果您不想显示渲染版本，请在 CSS 中将 canvas 元素设置为 display: none - 就这么简单！如果您需要更多详细信息以使其正常工作，请告诉我。
再次感谢您的快速响应，我无法在用户更改时调用 html2canvas 函数。您能否给我一个示例代码示例？非常感谢。
@ScottMyers 这是一个reRender 函数，您可以在每次用户更改 div 时调用它。在此示例中，我将它附加到“重新渲染”按钮，但在您的代码中，您将希望在用户进行更改时自动调用它。 jsfiddle.net/que0fe08/1
非常感谢您的帮助！

【解决方案2】：

这是一个快速演示，展示了如何使用 JavaScript 将标记转换为画布，然后将其呈现为图像并在页面上替换它。

document.getElementById('generate').onclick = generateImage;

function generateImage() {
    var container = document.getElementById('image_text');
    var imgPrev = document.getElementById('img_prev');
    var desc = document.getElementById('desc');
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.setAttribute('width', container.clientWidth);
    canvas.setAttribute('height', container.clientHeight);
    context.drawImage(imgPrev, 0, 0);
    context.font = "bold 20px serif";
    context.fillText(desc.innerHTML, 0, container.clientHeight-20);
    context.strokeRect(0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL();
    var imgFinal = new Image();
    imgFinal.src = dataURL;
    container.parentNode.insertBefore(imgFinal, container.nextSibling);
    container.remove();
    document.getElementById('generate').remove();
}

#image_text {
    display: inline-block;
    border: 1px solid #000;
}

<div id="image_text">
  <div class="wrap">
    <img src= "https://placekitten.com/g/200/300" id="img_prev" crossorigin="anonymous" />
    <h3 id="desc" contenteditable>Something Inspirational</h3>
  </div>
</div>

<button id="generate">Generate Image</button>

您可以将图像文件替换为您喜欢的任何内容。我在img 标记中添加了crossorigin 属性，这是因为除非指定了crossorigin 属性，否则无法导出使用其他站点资源的画布（如果您的脚本和图像位于同一域中，则为不必要）。

我还使h3 标记可编辑。您可以单击文本并开始输入以更改其内容，然后单击“生成图像”并保存呈现的输出。

这个脚本只是一个演示。它不是万无一失的，它只是一个概念验证，可以帮助您了解所使用的技术并自己应用这些技术。

javascript 创建一个canvas 元素（从 DOM 分离），并根据标记中的容器 div 调整其大小。然后将图像插入画布（将其插入左上角），从h3 标签加载文本并将其放在画布的左下角附近，然后将该画布转换为 data-uri .然后在容器之后创建一个新的img元素，并删除容器和按钮。

【讨论】：