个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我试图将带有文本和图像的 div 转换为单个图像，然后将该图像设置为我的图像源，但该图像被复制多次或出现错误且代码无法正常工作。
我从 textarea 获取文本，然后将该文本设置在图像上方，然后使用 html5canavs 将该文本和图像转换为单个图像。代码工作正常，但问题是图像被复制多次，如果我试图清除图像，它就不起作用。
这是多次重叠后的外观图像。 
这是我的代码
window.onload = function() {
}
function myFunction() {
var v = document.getElementById("mTextArea").value;
document.getElementById("wow").innerHTML = v;
html2canvas(document.getElementById("imagewrap"), {
onrendered: function(canvas) {
theCanvas = canvas;
canvas.className = "html2canvas";
var image = canvas.toDataURL("image/png");
// document.body.removeChild("container2"); <<---Throwing Error
document.getElementById("img_prev").src = image;
},
useCORS: true
});
}*{
font-family: 'Roboto', sans-serif;
}
#container1{
float: left;
}
#container2{
float: right;
}
#mImage{
height: 300px;
width: 300px;
}
.desc {
position: absolute;
text-align: center;
top: 1px;
left: 30px;
}
.outer, .wrap, .html2canvas, .image_text {
display: inline-block;
vertical-align: top;
}
.wrap {
text-align: center;
}
#imagewrap {
position: relative;
background-color: white;
}
#wow {
text-align: center;
font-size: 25pt;
position: absolute;
color: red;
display: block;
top: 50px;
left: 50px;
right: 50px;
align-items: center;
word-wrap: break-word;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<title>Social Poster</title>
</head>
<body>
<h1>Social Poster</h1>
<div id="container1">
<textarea name="inputT" id="mTextArea" cols="30" rows="10"></textarea>
<button id="mButton" onclick="myFunction()">Click ME!</button>
</div>
<div id="container2">
<div class="outer">
<div id="imagewrap" class="wrap" style="border: solid;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ2w0Uf5u-qRiqYZVXmHukxNQxPENtwoEqh2qBpj871sojoaePh&usqp=CAU" id="img_prev" width="500" />
<span id="wow">WOW!</span>
</div>
</div>
</div>
</body>
</html>最佳答案
您正在将图像渲染到其自身之上，从而导致反馈效果。
只需使用两个图像。单击“渲染”时显示背景和文本，并且当结果渲染后，将隐藏原始背景和文本，仅显示结果图像。
将边框移出渲染图像以停止收缩背景。
mButton.addEventListener("click",createImage);
function createImage() {
// show text and background image
wow.textContent = mTextArea.value;
wow.classList.remove("hide");
backgroundImage.classList.remove("hide");
// hide prev rendered image
resultImage.classList.add("hide");
// render to canvas
html2canvas(imagewrap, {
onrendered(canvas) {
// hide background and text image
backgroundImage.classList.add("hide");
backgroundImage.classList.add("hide");
// show rendered image
resultImage.classList.remove("hide");
resultImage.src = canvas.toDataURL("image/png");
},
useCORS: true
});
}*{
font-family: 'Roboto', sans-serif;
}
#container1{
float: left;
}
#container2{
float: right;
}
#mImage{
height: 300px;
width: 300px;
}
.desc {
position: absolute;
text-align: center;
top: 1px;
left: 30px;
}
.outer, .wrap, .html2canvas, .image_text {
display: inline-block;
vertical-align: top;
}
.wrap {
text-align: center;
}
#imagewrap {
position: relative;
background-color: white;
}
#wow {
text-align: center;
font-size: 25pt;
position: absolute;
color: red;
display: block;
top: 50px;
left: 50px;
right: 50px;
align-items: center;
word-wrap: break-word;
}
.hide {
display: none;
}
.resultBorder {
border: solid;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<h1>Social Poster</h1>
<div id="container1">
<textarea name="inputT" id="mTextArea" cols="30" rows="10"></textarea>
<button id="mButton" >Create Image!</button>
</div>
<div id="container2">
<div class="outer resultBorder">
<div id="imagewrap" class="wrap" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ2w0Uf5u-qRiqYZVXmHukxNQxPENtwoEqh2qBpj871sojoaePh&usqp=CAU" id="backgroundImage" width="500" />
<img class="hide" id="resultImage"></img>
<span id="wow">WOW!</span>
</div>
</div>
</div>关于javaScript 清晰图像源不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61287356/
25
4
0
你好，我是 Cone。 首先，我们思考一个问题。 为什么会有操作系统? 在我们教科书上会提到分时系统、批处理系统等等现代操作系统前的中间产物，也会讲到管理硬件的功能，但似乎没有讲到为什么有
假设我只想清除顶部的所有条目，清除 Map 的 Map 的最合适方法是什么 -关卡 map ？ Map> nestedMap; 方法A:仅清除顶层 map 。 nestedMap.clear();
我时不时遇到一个问题，我不确定解决方案是什么。 我有一个 2 列布局(左边是 strit，然后是主要区域)。在主要区域，我有时会有一个次要的 2 栏布局(例如 - 对于新闻部分，那里有一个图标，然后是
我有以下代码: Created Created .clearfix:after{ clear: both; bdy: "."; display
有没有办法CLS单行输出？我不相信 CLS 有任何开关，所以也许更好的问题是: 有什么办法吗 保留所有以前的输出以供重复使用？ 或 捕获当前显示的输出(就像通过标记和复制一样)？ 我只是想通过实时反馈
我有一个流式布局。当布局足够宽时，一些 div(.one 和 .two)可以全部水平排列在一条线上。 当布局最终被挤压时，右侧 float 的 div (.two) 最终会出现在多行上。有没有一种方法
我面临着一个我真的不知道从哪里开始解决的问题，所以我希望这个问题不要太宽泛。 我正在制作并在屏幕上应用它，我将有一个包含一些信息的矩形(假设它是一个 )并且我需要用另一个矩形覆盖那个矩形，所以当用户
我的 UITableView 跨越 iPhone View 的大小，并有一个 tableHeaderView 保存附加内容。想要标题清晰，表格的其余部分白色，我将表格的背景颜色设置为清晰，并在 Vie
我一直在使用 ImageMagick，但它产生的结果非常模糊。 convert -density 300 ../images/favicons/procensus.svg -background tr
我有手动数据的工作项目，但我想在我的项目中添加 json 解析。我认为我需要帮助。 (必须是实时解析，如果可能的话，新的item添加时会自动释放) 我的 TableView 代码 - (void)sc
我正在制作一个响应式网站。我有 3 个 div (.block)，我需要将它们水平放置在一起。 当屏幕足够宽时，这很容易实现。但是，当我使浏览器更窄时，第三个 div (3) 换行到下一行，但我想要的
如何在 Swift 3 中使这个 UITableView 和它的单元格清晰。 我已经完成了前面的线程，但我仍然得到一个白色背景。 正如您从我的代码中看到的，我已经尝试了提到的各种方法: overrid
当我使用 为了显示图标，它在谷歌浏览器中看起来非常清晰锐利。然而，当我在 Firefox 或 Internet Explorer 中打开 svg 时，图标看起来很模糊。 这些浏览器似乎将图标呈现为半像
我是一名优秀的程序员,十分优秀！