[英]Javascript - Replace appendChild element
JS代码
watermark([scope.videoSnapshotPath, scope.watermarkLogoPath])
.image(myPositionFunction(scope.watermarkPosition))
.then(function (img) {
document.getElementById(scope.watermarkPosition).appendChild(img);
})
当用户选择第一张图片时,结果如下
产量
<div data-water-mark="" id="lowerRight" class="col-lg-9 col-md-6 col-sm-6 col-xs-12 padding-l-0">
<img src="data:image1/png;base64"> //first image
</div>
选择任何其他图像时, first
一幅图像不会替换为second
幅图像,而是会被附加。
<div data-water-mark="" id="lowerRight" class="col-lg-9 col-md-6 col-sm-6 col-xs-12 padding-l-0">
<img src="data:image1/png;base64"> //first image
<img src="data:image2/png;base64"> //second image
</div>
如何在div
内附加图像,并用选择的新图像替换先前的图像,即用第二个图像替换第一个?
PS img src
是从插件js动态生成的,并且无需使用jquery就可以实现解决方案。
您可以更改src而不是附加一个新的。
$("#my_image").attr("src","data:image/png;base64");
您可以使用replaceChild
( 文档 )。
parentNode.replaceChild(newChild, oldChild);
var div = document.querySelector("div"); var newImg = document.createElement("img"); newImg.src = "http://placehold.it/400x150"; var swap = function(img) { div.replaceChild(img, div.children[0]); } document.querySelector("button").addEventListener("click", swap.bind(null, newImg));
<div> <img src="http://placehold.it/200x150"> </div> <button>replace</button>
在您的代码中:
function (img) {
var parent = document.getElementById(scope.watermarkPosition);
parent.replaceChild(img, parent.children[0])'
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.