前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >canvas生成图片

canvas生成图片

作者头像
练小习
发布2017-12-29 15:05:23
2.4K0
发布2017-12-29 15:05:23
举报
文章被收录于专栏:练小习的专栏

今天接到个小需求:前端生成个二维码并且以img标签的方式在web上展示出来。

二维码就不用说了,搜一下实现的各种插件一大堆,这里我用基于jquery的qrcode插件生成一枚。look~

代码语言:txt
复制
<!DOCTYPE html>
代码语言:txt
复制
<html>
代码语言:txt
复制
<head>
代码语言:txt
复制
<title>canvas生成图片</title>
代码语言:txt
复制
</head>
代码语言:txt
复制
<body>
代码语言:txt
复制
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
代码语言:txt
复制
<script type="text/javascript" src="//www.chengrang.com/demo/src/jquery.qrcode.js"></script>
代码语言:txt
复制
<script type="text/javascript" src="//www.chengrang.com/demo/src/qrcode.js"></script>
代码语言:txt
复制
<h2>Render in canvas</h2>
代码语言:txt
复制
<div id="Canvas"></div>
代码语言:txt
复制
<script>
代码语言:txt
复制
    jQuery('#Canvas').qrcode({
代码语言:txt
复制
        text: "https://www.chengrang.com"
代码语言:txt
复制
    });
代码语言:txt
复制
</script>
代码语言:txt
复制
</body>
代码语言:txt
复制
</html>

提示:你可以先修改部分代码再运行。

然后个性化一下这个二维码,比如插入自己的logo或者照片什么的。因为canvas已经生成了,所以我们只需要拿来用就OK:

  1. var Canvas = $('canvas')[0];
  2. var CRC = Canvas.getContext('2d');
  3. var img = new Image();
  4. img.onload = function(){
  5. draw(this);
  6. };
  7. img.src = 'https://chengrang.com/demo/src/logo.png';
  8. function draw(obj){
  9. CRC.drawImage(obj,100,100);
  10. }

用drawImage的方法混进去个奇怪的东西。

然后canvas就变成了最终需要的样子:

提示:你可以先修改部分代码再运行。

最后一步就是把这个canvas变成一张图片,使用toDataURL的方法

  1. function showPic(){
  2. var dataUrl = $('canvas')[0].toDataURL('image/png');
  3. var newImg = '<h2>create Img </h2>';
  4. newImg += '<img src="' + dataUrl + '">';
  5. $('body').append(newImg);
  6. }

最后合起来看一下这个canvas和生成的img

代码语言:txt
复制
<!DOCTYPE html>
代码语言:txt
复制
<html>
代码语言:txt
复制
<head>
代码语言:txt
复制
<title>canvas生成图片</title>
代码语言:txt
复制
</head>
代码语言:txt
复制
<body>
代码语言:txt
复制
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
代码语言:txt
复制
<script type="text/javascript" src="//www.chengrang.com/demo/src/jquery.qrcode.js"></script>
代码语言:txt
复制
<script type="text/javascript" src="//www.chengrang.com/demo/src/qrcode.js"></script>
代码语言:txt
复制
<h2>Render in canvas</h2>
代码语言:txt
复制
<div id="Canvas"></div>
代码语言:txt
复制
<script>
代码语言:txt
复制
    jQuery('#Canvas').qrcode({
代码语言:txt
复制
        text: "https://www.chengrang.com"
代码语言:txt
复制
    });
代码语言:txt
复制
//q
代码语言:txt
复制
    var Canvas = $('canvas')[0];
代码语言:txt
复制
    var CRC = Canvas.getContext('2d');
代码语言:txt
复制
    var img = new Image();
代码语言:txt
复制
    img.onload = function(){
代码语言:txt
复制
        draw(this);
代码语言:txt
复制
    };
代码语言:txt
复制
    img.src = 'https://www.chengrang.com/demo/src/logo.png';
代码语言:txt
复制
    function draw(obj){
代码语言:txt
复制
      CRC.drawImage(obj,100,100);
代码语言:txt
复制
    }
代码语言:txt
复制
</script>
代码语言:txt
复制
</body>
代码语言:txt
复制
</html>

提示:你可以先修改部分代码再运行。

如果你看的是转载的文章可能会因为安全策略的问题代码跑不起来报错,只要转到caihong.cc就OK了。

另外看到canvas和base64就不要再问低版本IE怎么兼容了吧……

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档