问HTML元素转换为图像
EN

Stack Overflow用户

提问于 2018-12-02 23:41:06

回答 1查看 60关注 0票数 0

如果你有这个：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>

使用HTML编译器编译后，您将获得一个图像，您可以右键单击该图像并选择“将图像另存为...”。

但如果你拿这个：

<!DOCTYPE html>

<html lang="en" class=""><head><script src="//static.codepen.io/assets/editor/live/console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js"></script><script src="//static.codepen.io/assets/editor/live/css_reload-2a5c7ad0fe826f66e054c6020c99c1e1c63210256b6ba07eb41d7a4cb0d0adab.js"></script><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico"><link rel="mask-icon" type="" href="//static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111"><link rel="canonical" href="https://codepen.io/sdthornton/pen/wBZdXq">


<style class="cp-pen-styles">body {
  background: #e2e1e0;
  text-align: center;
}

.card {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 300px;
  margin: 1rem;
  position: relative;
  width: 300px;
}

.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

</style></head><body>

<div class="card card-2"></div>
</body></html>

右击输出，你不能选择“另存图像为...”为了能够右键单击.card-2并将其保存为图像，我应该如何编写代码？

html

html5-canvas

回答 1

Stack Overflow用户

发布于 2018-12-02 23:57:47

正如其他人所说，canvas元素可以像您解释的那样从浏览器保存为IMG(因为浏览器将其视为IMG)；但是HTML+CSS并非如此。你的问题意味着你可以右击任何网站，并将整个过程保存为图像。

你可以做的就是把一个div的内容放到画布里，你可以在这里找到一些想法和技巧：How can I convert an HTML element to a canvas element?

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53581814

复制

相似问题

问HTML元素转换为图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML元素转换为图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML元素转换为图像
EN