Question

我想'捕捉'一个元素/图像，包括应用于它们的CSS样式，然后将它们作为一个base64图像。

我应该定位图片还是应该定位<figure>元素？因为这个元素实际上是CSS类所在的位置（CSS必须以<figure>元素为目标才能正常工作）。

我相信有一些方法可以直接将图像转换为base64，但我将CSS应用于源图像上不存在的图像的父<figure>元素，因此我认为这些方法不适用于此处因为他们会忽略CSS和HTML。

如果不能简单地使用JS / jQuery，是否有办法在HTML5画布中放置相同的设置（应用CSS和<figure>元素）并将其捕获到那里？

.image__container { width:300px; height:200px; overflow:hidden; }

#image { margin:0; padding:0; }

.toaster {
  -webkit-filter: contrast(1.5) brightness(.9);
  filter: contrast(1.5) brightness(.9)
}

.toaster::after {
  background: -webkit-radial-gradient(circle, #804e0f, #3b003b);
  background: radial-gradient(circle, #804e0f, #3b003b);
  mix-blend-mode: screen
}

.toaster:after,
.toaster:before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none
}

.toaster {
  position: relative
}

.toaster img {
  width: 100%;
  z-index: 1
}

.toaster:before {
  z-index: 2
}

.toaster:after {
  z-index: 3
}

CSS applied:
<section class="image__container">
  <figure id="image" class="toaster">
    <img src="http://d2d0b2rxqzh1q5.cloudfront.net/sv/3.65/dir/54b/image/54ba93e641021e29fbdc2eb3f7317266.jpg" width="300">
  </figure>
</section>

Original image:<br>
<img src="http://d2d0b2rxqzh1q5.cloudfront.net/sv/3.65/dir/54b/image/54ba93e641021e29fbdc2eb3f7317266.jpg" width="300">

Answer 1

如果我理解正确，你想要一些渲染的DOM，包括图像，转换为base64。这是一个计划：

使用页面上的CSS和图像渲染DOM元素
确保您的内容位于可查找的元素中，例如div
找到div并获取其innerHTML（或者，如果您真的想使用jQuery，则为.html()值）
请阅读以下内容：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
使用上述内容，复制innerHTML中的内容并将其复制到canvas
一旦它在画布上，使用JavaScript来阅读它，并按照你的想法。

听起来很简单，不是吗......？

我自己没有尝试过这种技术，但值得一试。

将HTML元素及其图像内容转换为base64

1 个答案: