使用canvas进行多图像合并

2018/09/03
- 编程
0阅读

需求

需要制作一个二维码页面供文案插入到微信文章的跳转链接中，用户识别该页面中的二维码后跳转到指定页面。

之前因为频次（每1-2周变更一次）和图片（图片并不只是一个二维码，还存在着ICON和一些背景样式）的关系，每次都是制作完图片后重新copy一个页面使用。随着现在使用频次逐渐变高和手上的事情趋于稳定之后，打算制作一个通用的二维码页面，以url参数传递需要跳转的网址之后页面上自动生成二维码。

效果如下

方案

二维码使用jquery_qrcode.js生成。

1.使用DIV的position定位位置，拼接图片

2.使用canvas拼接图片

制作

考虑到之前并没有使用过canvas的经验，首选就是div定位的方式去制作。

制作完成之后进入微信测试，发现微信的识别范围应该是图片自身的大小（之前在某文章内看到微信在长按时会自动识别页面内的二维码，现在发现是在扯淡了）。

看来DIV的方式是走不通了，于是开始尝试下canvas制作。

最开始走入了一个误区，代码如下

var canvas = document.getElementById("canvas");
// 我以为可以直接在canvas里使用drawImage方法，结果试了好久就是画不出来
canvas.drawImage(xxx,0,0);// 这个写法是错误的

// 正确写法 
var cxt = canvas.getContext("2d");   // getContext方法返回一个用于在画布上绘图的环境。
var bgImage = new Image();           // 声明一个图片对象
bgImage.src = $('.XXX').attr('src'); // 设置图片的值，我这里的src已经是图片转base64后的值了
bgImage.onload = function(){         // 此处一定要在onload方法里写，不然图片会无法显示的
    cxt.drawImage(bgImage,0,0);      // 此时再使用drawImage方法绘制图片
};

另外canvas的绘制有可能出现后发先至的情况，建议多图绘制时使用回调进行连续操作。


function step1(){
    step1.onload = function(){
        cxt.drawImage(step1,0,0);
        step2(); // 当步骤一绘制之后，再绘制步骤二
    }
}

function step2(){
    ...
}

...

使用canvas进行多图像合并

作者：有点东西

链接： https://www.youdiandongxi.com/article/canvas-images-bind.html

协议：本文采用 CC BY-NC-SA 4.0 隐私协议，转载请注明出处！

使用canvas进行多图像合并

需求

方案

制作

使用canvas进行多图像合并

其他推荐内容

PHP 插件与钩子

thinkphp钩子的实现

vue多环境不同配置的正确打包方式

评论区