现在经常会遇到那种带二维码的推广图片，如下图所示：

1是整张推广图的背景，2是二维码。这种图片的背景是保持不变的，里面的二维码是变化的。所以我们需要把二维码单独生成然后与背景合并。

我们可以通过canvas绘图达到将2张图片合并的效果。

具体代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Html5 Canvas 实现图片合成</title>

        <style>

            body{

                text-align: center;

            }

            img {

                border: solid 1px #ddd;

            }

        </style>

    </head>

    <body>

        <div align="center">

            <img src="promote_store_bg.png">

            <img src="promote_store_qrcode.png">

        </div>

        <input type="button" value="一键合成" onclick="hecheng()">

        <a href="" download id="downloadPic">下载合成图</a>

        <div id="imgBox" align="center">

        </div>

        <script>

            function hecheng() {

                draw(function() {

                    document.getElementById('imgBox').innerHTML = '<img src="' + base64[0] + '">';

                    document.getElementById('downloadPic').href = base64[0];

                })

            }

            var data = ['promote_store_bg.png', 'promote_store_qrcode.png'],

                base64 = [];

            function draw(fn) {

                var c = document.createElement('canvas'),

                    ctx = c.getContext('2d'),

                    len = data.length;

                c.width = 400;

                c.height = 400;

                ctx.rect(0, 0, c.width, c.height);

                ctx.fillStyle = '#fff';

                ctx.fill();

                function drawing(n) {

                    if(n < len) {

                        var img = new Image;

                        //img.crossOrigin = 'Anonymous'; //解决跨域

                        img.src = data[n];

                        img.onload = function() {

                            if(n == 1) {

                                ctx.drawImage(img, 121, 129, 160, 160); //121和129表示二维码距离背景图片左上角的X轴，Y轴，160表示生成的图片中二维码的大小

                            } else {

                                ctx.drawImage(img, 0, 0, c.width, c.height);

                            }

                            drawing(n + 1); //递归

                        }

                    } else {

                        //保存生成作品图片

                        base64.push(c.toDataURL()); //通过canvas.toDataURL转成base64.

                        //alert(JSON.stringify(base64));

                        fn();

                    }

                }

                drawing(0);

            }

        </script>

    </body>

</html>

a标签通过添加download属性并把生成的base64赋值给a的href就可以直接下载图片了。

Canvas 实现图片合成并下载合成图片的更多相关文章

  1. python图片爬虫 - 批量下载unsplash图片

    前言 unslpash绝对是找图的绝佳场所, 但是进网站等待图片加载真的令人捉急, 仿佛是一场拼RP的战争 然后就开始思考用爬虫帮我批量下载, 等下载完再挑选, 操作了一下不算很麻烦, 顺便也给大家提 ...

  2. 用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具

    直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区 ...

  3. php图文合成文字居中(png图片合成)

    header('Content-type:text/html;charset=utf-8'); /** * png图文合成 by wangzhaobo * @param string $pic_pat ...

  4. 解决 canvas 下载含图片的画布时的报错

    Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...

  5. H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作

    今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...

  6. arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  7. Vue点击按钮下载对应图片

    最近有用到点击某个按钮 自动下载对应图片,可是对于浏览器不同的问题,会有‘个别’浏览器出现不能下载的或者下载的效果不同等的问题, 可以直接用创建canvas方法: 定义图片地址Img: "w ...

  8. java实现批量下载百度图片搜索到的图片

    就是写的个小程序,用于记录一下,方便后续查看,首先感谢下面这个博客,从这篇文章衍生的吧,大家可以学习下: http://www.cnblogs.com/lichenwei/p/4610298.html ...

  9. C#获取网页的HTML码、下载网站图片、获取IP地址

    1.根据URL请求获取页面HTML代码 /// <summary> /// 获取网页的HTML码 /// </summary> /// <param name=" ...

随机推荐

  1. Android 方向传感器

    一般情况下,在Android系统中获取手机的方位信息在api中有TYPE_ORIENTATION常量,可以像得到加速度传感器那样得到方向传感器sm.getDefaultSensor(Sensor.TY ...

  2. SpringBoot优化内嵌的Tomcat ---设置MaxConnections

    使用kill -9杀掉springboot应用后,立马java -jar重启,会报错,需要等待一段时间才能启动成功,报错的原因是:/tmp/tomcat-docbase.474979491043437 ...

  3. RHEL7 -- NetworkManager

    RHEL7中默认的网络服务是由NetworkManager提供,NetworkManager可以动态控制和配置网络. 网络工具和应用 应用或工具 描述 NetworkManager 默认的网络守护进程 ...

  4. configure: error: png.h not found.

    PHP的时候提示这个错误 configure: error: png.h not found.,这个是选择安装GD模块才会出现的错误,详细错误信息如下 If configure fails try - ...

  5. Spring Boot热部署（springloader）

    使用方式一 在pom.xml文件添加依赖包: <plugin> <groupId>org.springframework.boot</groupId> <ar ...

  6. appserv - 最简单的绑定路径

    补充:此方法比较low. 推荐伪静态:http://www.cnblogs.com/CyLee/p/5544119.html 找到路径C:\AppServ\Apache24\conf\httpd.co ...

  7. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  8. Ruby的DevKit名词解释

    为了加快运行速度,Ruby下好多扩展包都是用C语言写的二进制包,如果我们要安装就要重新编译,DevKit包主要就是将编译用的工具链打包,解决了众多依赖问题,方便了群众. 但是,在实际安装中,可能还会遇 ...

  9. ModelSim之tcl自动化仿真

    摘要: ModelSim的tcl最大的优势就在于它可以让整个仿真自动运行,免除每次进行各种用户界面控制操作的麻烦.用tcl就可以自动完成建库.映射库到物理目录.编译源代码.启动仿真器.运行仿真等一系列 ...

  10. 在ISE查看各个模块消耗的资源

    这个是很多兄弟姐妹非常想知道的事情.我今天就简单和大家详细说一说.其实很简单,只是大家可能没有注意而已.把图上的-detail选定即可. 转载自:http://bbs.21ic.com/blog-73 ...