如何为用户制作 html div 文字覆盖图像 downloadable/savable？

Question

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

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);
    });

Answer 1

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

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 属性，这是因为 canvas 使用其他站点资源的 es 无法导出，除非指定了 crossorigin 属性（如果你的脚本和图像在同一个域中，这是不必要的）。

我还使 h3 标签可编辑。您可以单击文本并开始键入以更改其内容，然后单击 "generate image" 并保存呈现的输出。

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

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

Answer 2

仅使用 HTML、JS 和 CSS 完全可以实现您想要实现的目标，无需服务器端代码。这是一个简化的演示，它使用 html2canvas library 将整个 DOM 元素呈现为 canvas，然后用户可以在其中下载它。

一定要在演示上单击 "Full page"，这样您才能看到完整的内容！

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>

如何为用户制作 html div 文字覆盖图像 downloadable/savable？

How to make html div with text over image downloadable/savable for users?

html

javascript

css

save-image