Question

我有一个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);
    });

Answer 1

您只需使用HTML，JS和CSS，而无需服务器端代码，完全可以实现的目标。这是一个简化的演示，它使用html2canvas library将整个DOM元素渲染到画布，然后用户可以下载它。

请务必点击＆＃34;整页＆＃34;在演示中，你可以看到整个事情！

＆＃13;

$(panel).html(data);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用HTML5 Canvas执行此操作。请参阅this article for an overview。

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

我还使h3标签可以编辑。您可以单击文本并开始键入以更改其内容，然后单击＆＃34;生成图像＆＃34;并保存渲染的输出。

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

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

如何使html div与文本图像可下载/可供用户使用？

3 个答案: