使用canvas进行多图像合并
in 前端 with 0 comment

使用canvas进行多图像合并

in 前端 with 0 comment

需求

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

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

效果如下

未标题-1.png

方案

二维码使用jquery_qrcode.js生成。

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

2.使用canvas拼接图片

制作

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

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

未标题-1.png

看来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(){
        ...
    }
    
    ...
Comments are closed.