canvas生成图片

2017-12-29 15:05:23 浏览数 (1)

今天接到个小需求：前端生成个二维码并且以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怎么兼容了吧……

canvas 数据结构

0 人点赞