使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】

发布时间:2021-04-17 发布网站:https://www.cnblogs.com/yevin
前端之家收集整理的这篇文章主要介绍了使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

CSS3 Canvas 实现两张图片合成一张图片

需求

需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地。

思路:使用 CSS3 中的 Canvas 将两张图片绘制。

HTML 部分

<div>
  <img id="img1" src="wenbo.jpg" alt="" />
  <img id="img2" src="demo.png" alt="" />
</div>
<br />
<div>
  <canvas width="300" height="300" id="myCanvas"></canvas>
</div>

JavaScript 部分

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//获取元素
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
// 等待图片加载完毕
img1.onload = function () {
  ctx.drawImage(img1,300,300);
};
img2.onload = function () {
  ctx.drawImage(img2,75,150,150);
};

实现效果

如下图所示:

使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】

html2canvans

html2canvans 插件也可以实现相关功能
插件地址:http://html2canvas.hertzen.com/

总结


以上是前端之家为你收集整理的使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】全部内容,希望文章能够帮你解决使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。