【问题标题】:saving a HTML div tag containing an image with its layers to a new image将包含图像及其图层的 HTML div 标签保存到新图像
【发布时间】:2013-04-24 11:24:46
【问题描述】:

实际上,我有一个 div 标签,其中包含一个标签和几个其他标签,这些标签是显示在图像上方的小文本。因此,我需要将图像及其内容保存到新图像中。 欢迎您的所有想法。 谢谢。

<div id="bin" class=""> 
  <img id="myImage" src="myImage.jpg" alt="" width="300" height="550" />
      <div class="" >a</div>
      <div class="" >b</div>
      <div class="" >c</div>
 </div>

【问题讨论】:

  • 你有没有尝试过?据我所知,做这个客户端几乎是不可能的(使用 HTML5 画布技术在画布上呈现 DOM 元素并将结果转储到图像中)。
  • @RobinvanBaalen 不幸的是,我成功地只保存了没有数据的图像。我现在正在尝试从浏览器内存中获取这些内容,然后将它们打印到新图像中。非常感谢

标签: c# javascript asp.net css html


【解决方案1】:

做这个客户端听起来很有挑战性。您最好的选择可能是创建一个(一组?)C# 类来表示图像的属性和服务器端的相关数据,然后使用这些类并尝试使用 C# 重现图像。

更新:

根据您在下面的评论,听起来可行的选择是将图像数据发布到例如 .ashx,然后在那里执行逻辑。您在评论中提到您已经能够保存图像,所以现在您应该能够处理它,一旦您获得所需的参数。为此,我认为ashx 可能是要走的路。

【讨论】:

  • 感谢您的帮助。实际上问题是我使用 javascript 来获取图像及其数据,然后使用 C# 打印新图像。
  • @AhmedMEZRI 好的,那么您真正需要的是一种“接受”图像参数的方法吗?使用 JS 将其发布到 C# 怎么样? (更新了我的答案)。
  • 是的,我确实尝试过 IsPostBack,但即使我将它与 javascript 一起使用它也不起作用
  • 干得好,解决了。感谢 html2canvas 插件,我成功地将 div 标签内容转换为画布,然后对画布进行截图。在图像上方添加任何数据后,原理非常简单,代码将截取画布的屏幕截图,因此当您按下底部时,您将获得最后一张图像。
  • 酷,@AhmedMEZRI!您介意在此处发布解决方案作为答案吗?看到它会很有趣,您可以接受它作为您自己问题的“正确答案”。这可能对以后面临类似问题的其他人有所帮助。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-24
  • 2011-04-22
  • 2019-11-24
  • 1970-01-01
  • 1970-01-01
  • 2012-07-10
相关资源
最近更新 更多