canvas叠合多张图片，以及图片的跨域和onload问题(combine multi imgs)

最新推荐文章于 2023-01-03 10:50:24 发布

原创

最新推荐文章于 2023-01-03 10:50:24 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #qrcode生成 #生成二维码 #onload #跨域

这篇博客讲述了在微信活动中如何使用canvas作为底图，并叠加生成的二维码图片。作者利用jquery.qrcode插件生成canvas上的二维码，通过dataToURL转换成image。在处理img.onload时，强调了先定义回调函数再赋值src的重要性。在canvas绘制过程中，由于底图路径跨域，需要对图片设置crossOrigin属性。最后，将canvas转换为img以便于长按识别二维码。

好久没有写博客了，一上来，居然点击快要破万了，有点成就感呢，哈哈哈~

最近做了一个微信活动的页面，需求是这样：有一张静态的图片预先传在网上，在canvas上以它作为底图。另外要针对每个用户生成一个特有的二维码图片，叠在底图上。最后把绘制好的canvas转成img形式，使长按二维码可以识别。

需求很简单，但还是踩了一些坑，这里把技术要点列出来。

生成二维码，采用了jquery.qrcode插件，api貌似只有table和canvas两种渲染方式，有人查到了可以直接出image，但我在github上的readme里只看到了这两种，所以就用canvas渲染出图。然后dataToURL转成image，由于不知道具体何时能渲染出来，用settimeOut隔了350ms再去取。但感觉还是挺快的，貌似即时就可以取到。
img的onload过程，就是把src赋给它的过程。onload回调函数应当先写，再最后赋给src。如多张图片存在先后次序，比如要先画img1再画img2，那代码大致如此

var img1 = new Image(),
    img2 = new Image()
img1.onload = function(){
   
   
    img2.src = '../x.png'
}
img1.src = '.../x.png'

3 .

最低0.47元/天解锁文章