canvas生成图片
今天接到个小需求：前端生成个二维码并且以img标签的方式在web上展示出来。
二维码就不用说了，搜一下实现的各种插件一大堆，这里我用基于jquery的qrcode插件生成一枚。look~
<!DOCTYPE html><html><head><title>canvas生成图片</title></head><body><script src="//code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript" src="//www.chengrang.com/demo/src/jquery.qrcode.js"></script><script type="text/javascript" src="//www.chengrang.com/demo/src/qrcode.js"></script><h2>Render in canvas</h2><div id="Canvas"></div><script> jQuery('#Canvas').qrcode({ text: "https://www.chengrang.com" });</script></body></html>提示：你可以先修改部分代码再运行。
然后个性化一下这个二维码，比如插入自己的logo或者照片什么的。因为canvas已经生成了，所以我们只需要拿来用就OK：
- var Canvas = $('canvas')[0];
- var CRC = Canvas.getContext('2d');
- var img = new Image();
- img.onload = function(){
- draw(this);
- };
- img.src = 'https://chengrang.com/demo/src/logo.png';
- function draw(obj){
- CRC.drawImage(obj,100,100);
- }
用drawImage的方法混进去个奇怪的东西。
然后canvas就变成了最终需要的样子：
提示：你可以先修改部分代码再运行。
最后一步就是把这个canvas变成一张图片，使用toDataURL的方法
- function showPic(){
- var dataUrl = $('canvas')[0].toDataURL('image/png');
- var newImg = '<h2>create Img </h2>';
- newImg += '<img src="' + dataUrl + '">';
- $('body').append(newImg);
- }
最后合起来看一下这个canvas和生成的img
<!DOCTYPE html><html><head><title>canvas生成图片</title></head><body><script src="//code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript" src="//www.chengrang.com/demo/src/jquery.qrcode.js"></script><script type="text/javascript" src="//www.chengrang.com/demo/src/qrcode.js"></script><h2>Render in canvas</h2><div id="Canvas"></div><script> jQuery('#Canvas').qrcode({ text: "https://www.chengrang.com" });//q var Canvas = $('canvas')[0]; var CRC = Canvas.getContext('2d'); var img = new Image(); img.onload = function(){ draw(this); }; img.src = 'https://www.chengrang.com/demo/src/logo.png'; function draw(obj){ CRC.drawImage(obj,100,100); }</script></body></html>提示：你可以先修改部分代码再运行。
如果你看的是转载的文章可能会因为安全策略的问题代码跑不起来报错，只要转到caihong.cc就OK了。
另外看到canvas和base64就不要再问低版本IE怎么兼容了吧……
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读