canvas图片绘制-两张图片的叠加

效果

完整代码

<body><canvas id="canvas" width="800" height="800"></canvas><img src="" class="generateImg">
</body>
<script>// 创建 canvasconst canvas = document.querySelector('#canvas')const ctx = canvas.getContext('2d')// 画图var myImg = new Image();myImg.src = 'myImg.jpg';var bgImg = new Image();bgImg.src = 'bg.png';setTimeout(function(){ctx.drawImage(myImg, 0, 0, 800, 800)ctx.drawImage(bgImg, 0, 0, 800, 800)document.querySelector('.generateImg').src = canvas.toDataURL("image/png")},10)// 显示
</script>
</html>

备注
drawImage这个方法，当图片在没加载完的情况下使用失败failed to execute ‘drawimage’
所以可将图片提前放到html中

<img src="xxx.jpg" id="imgs" style="display:none"></img>

或者使用setTimeout

背景图片

canvas图片绘制-两张图片的叠加相关推荐

Matlab中实现两张图片的叠加显示效果
Matlab中实现两张图片的叠加显示效果 1.相同大小图片的叠加显示 2.不同大小图片的叠加显示 ** 在matlab中以50%透明度实现两张图图片的叠加显示,图片的大小可以任意设置,不同大小的图片, ...
使用canvas来实现两张图片合成一张
写在开头: 最近遇到一个需求,就是上传一张图片,原来的图片作为底图,两张图片组合在一起,形成一张新的图片.并能点击另存. 网上各种百度,谷歌.有很多方法.然后在我的需求里面都不是很适用.就结合前人的成 ...
cv::Mat两张图片的叠加方法
适用jpg图片的叠加 void mergeImage(cv::Mat &img1, cv::Mat img2, int x, int y) {if(x < 0 || y < 0)r ...
html 图片能重叠吗,css两张图片怎么叠加在一起？
1.新建一个html文件,命名为test.html,用于讲解css怎么把两个图片叠加在一起. Document 2.新建两个div,一个是class属性为a的div,另一个是class属性为b的div ...
html盒子两个背景图片,css怎么实现两张图片叠加在一起,css添加盒子背景图片
css怎么实现两张图片叠加在一起CSS怎么实现了两张图片的叠加,Css实现了两张图片叠加在一起的方法:可以通过分别设置div与页面左边缘的距离和div与页面上边缘的距离来实现.需要注意的是,两张图片都 ...
两个图片叠加在一起css,css两张图片怎么叠加在一起？
css实现两张图片叠加在一起的方法:首先添加2个img标签:然后设置它们的css样式为position:absolute:最后设置其中一个img样式为left:120px即可看见效果. 使用css把两 ...
python对比两张图片的不同并圈起来,比较两幅图像/图片，并标记差异
问题1: 这篇文章展示了比较两张图片的方法.最简单的方法可能是:from PIL import Image from PIL import ImageChops im1 = Image.open(&q ...
html5如何让多张图片重叠,css怎么让两张图片重叠？
css怎么让两张图片重叠?下面本篇文章给大家介绍一下使用CSS让两张图片重叠的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让两张图片重叠? 想要使用css把两个图 ...
html两张图重叠效果,css两张图片怎么叠加在一起？
使用css把两个图片叠加,可以通过position定位属性设置两张图片的位置来实现叠加效果.下面介绍css怎么把两个图片叠加在一起.希望对各位有帮助! 1.新建一个html文件,命名为test.htm ...

canvas图片绘制-两张图片的叠加

canvas图片绘制-两张图片的叠加相关推荐

最新文章

热门文章