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:

  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

<!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怎么兼容了吧……

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏简书专栏

学习了《python网络爬虫实战》第一个爬虫,爬取新浪新闻

请安装anaconda,其中附带的spyder方便运行完查看变量 1.进入cmd控制台, 输入 pip install BeautifulSoup4 pi...

1283
来自专栏运维小白

2.13 文档查看cat/more/l

cat/tac/more/wc用法 cat 这个查看文件内容的 -A 显示文件的所有文件(包括字符) -n 显示行号 tac 倒序查看文件内容,...

1786
来自专栏全沾开发(huā)

background-clip的正确使用姿势

background-clip可以用来控制背景图片/颜色的填充范围。 我们知道,默认的background会填充盒模型的content+padding+bord...

3259
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性

high:被界定为高的值的范围。 low:被界定为低的值的范围。 max:规定范围的最大值。 min:规定范围的最小值。 optimum: 规定度量的最...

993
来自专栏我是业余自学C/C++的

python3网络爬虫(抓取文字信息)

4044
来自专栏大前端_Web

不定高多行溢出文本省略

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

1112
来自专栏菩提树下的杨过

ExtJs学习笔记(1)_Hello World!

extjs最新版,可从http://www.extjs.com/官方网下载,下载包解压后docs目录里,就是API文档,samples目录里是示例 今天接触了下...

1886
来自专栏拂晓风起

Flex 可以拖出窗口的panel 拖动panel变为窗口

1094
来自专栏菩提树下的杨过

ExtJs学习笔记(24)-Drag/Drop拖动功能

直接给代码吧,主要重点已经在代码里注释了 Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio...

2169
来自专栏云飞学编程

美女老师带你做爬虫:BeautifuSoup库详解及实战!

模块:urllib、urllib2、BeautifuSoup4模块(解析器lxml、html)

751

扫码关注云+社区