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, 0, 0, 300, 300);
};
img2.onload = function () {
ctx.drawImage(img2, 75, 75, 150, 150);
};

实现效果

如下图所示:

html2canvans

html2canvans 插件也可以实现相关功能

插件地址:http://html2canvas.hertzen.com/

使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】的更多相关文章

  1. php 合并图片 (将活动背景图片和动态二维码图片合成一张图片)

    <?php //案例一:将活动背景图片和动态二维码图片合成一张图片 //图片一 $path_1 = './background.png'; //图片二 $path_2 = './FU0851_2 ...

  2. 小程序canvas生成二维码图片踩的坑

    1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...

  3. C#生成二维码,把二维码图片放入Excel中

    /// <summary> /// 把图片保存到excel中 /// </summary> /// <param name="excelFilePath&quo ...

  4. spa(单页应用)中,使用history模式时,微信长按识别二维码在ios下失效的问题

    spa(单页应用,vue)中,使用history模式时,微信长按识别二维码在ios下失效的问题. 触发条件: spa单页应用: 路由模式 history 从其他页面跳转到带有微信二维码识别的页面(不是 ...

  5. JAVA中生成、解析二维码图片的方法

    JAVA中生成.解析二维码的方法并不复杂,使用google的zxing包就可以实现.下面的方法包含了生成二维码.在中间附加logo.添加文字功能,并有解析二维码的方法. 一.下载zxing的架包,并导 ...

  6. ThinkPHP5生成二维码图片与另一张背景图片进行合成

    1.PHP方法 public function do_qrcode(){ Vendor('Qrcode.phpqrcode'); Vendor('Qrcode.Compress'); $object ...

  7. js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

    思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...

  8. javascript利用canvas解析图片中的二维码

    本方法两种应用方式:一种使用canvas解析本站图片中的二维码,canvas有同源策略限制,只能处理本站图片.另一种处理文件选择中的图片二维码. 第一种使用场景可以换成像微信中一样,长按图片识别二维码 ...

  9. 免费生成二维码接口,可直接嵌入到web项目中,附带嵌入方法,任意颜色二维码,任意大小二维码!

    在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿 ...

随机推荐

  1. 心之所向·智慧绽放丨NGK区块链赋能实体经济论坛圆满落幕

    据外媒报导,近日,由NGK主办的"NGK区块链赋能实体经济论坛"于英国伦敦的威斯敏斯特中央大厅圆满落幕.大会现场到来了NGK北美市场领导人.区块链行业的专业人士.NGK英国社区代表 ...

  2. JDK源码阅读-ByteBuffer

    本文转载自JDK源码阅读-ByteBuffer 导语 Buffer是Java NIO中对于缓冲区的封装.在Java BIO中,所有的读写API,都是直接使用byte数组作为缓冲区的,简单直接.但是在J ...

  3. 利用 Java 操作 Jenkins API 实现对 Jenkins 的控制详解

    本文转载自利用 Java 操作 Jenkins API 实现对 Jenkins 的控制详解 导语 由于最近工作需要利用 Jenkins 远程 API 操作 Jenkins 来完成一些列操作,就抽空研究 ...

  4. 使用python编写量子线路打印的简单项目,并使用Sphinx自动化生成API文档

    技术背景 该文章一方面从量子线路的打印着手,介绍了一个简单的python量子线路工程.同时基于这个简单的小工程,我们顺带的介绍了python的API文档自动化生成工具Sphinx的基本使用方法. 量子 ...

  5. 学习String源码的部分方法

    先看构造器: private final char value[]; //char类型的数组 以下均会用到 private int hash; //缓存字符串的哈希值 //以下均会用到 public ...

  6. Vue学习笔记-django-cors-headers安装解决跨域问题

    一  使用环境: windows 7 64位操作系统 二  jango-cors-headers安装解决跨域问题(后端解决方案) 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的 ...

  7. 第31天学习打卡(File类。字符流读写文件)

    File类 概念 文件,文件夹,一个file对象代表磁盘上的某个文件或者文件夹 构造方法  File(String pathname) File(String parent,String child) ...

  8. selectors版socket

    一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP 允许多用户并发上传下载文件 二.readme 一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP ...

  9. Elasticsearch常用API

    Note:以下API基于ES 5x,6x/7x可能略有不同,具体查看官方文档 ES常用API # 查看集群node curl "http://localhost:9200/_cat/node ...

  10. Spring 中的事务

    前言: 之前总结了事务以及数据库中事务相关的知识点,Spring 对于事务做了相应的封装,便于业务开发中使用事务. 项目中使用Spring中的事务首先时基于Mysql数据库中InnoDB 引擎的,如果 ...