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 向你比个心

之前写了一篇用 Python 画一个小猪佩奇和哆啦 A 梦,然后最近看到有人用 turtle 画了一个心,觉得挺有意思的,于是把代码复制到本地,再加了个播放音乐...

1505
来自专栏软件开发

30分钟搞定后台登录界面(103个后台PSD源文件、素材网站)

去年八月时要做一个OA系统为了后台界面而烦恼,后来写了一篇博客(《后台管理UI的选择》)介绍了选择过程与常用后台UI,令我想不到的时竟然有许多开发者与我一样都为...

23810
来自专栏姬小光

姬小光前端兴趣班【第010期】- 浏览器开发工具

前面几期我们学习了切图大法,我相信只要你认真学完,就可以立即派上用场。比如可以将你喜欢的图片切成个人主页,也可以将贺卡图片做成带链接的邮件等等。

632
来自专栏JetpropelledSnake

Linux学习笔记之Xshell配色方案定制

点击 Browse 按钮,弹出如下面板,选择 ANSI Colors on Black,然后点击右侧save as 按钮,命名为 zkl。

1291
来自专栏Rindew的iOS技术分享

iOS友盟分享:微博分享-文字+连接+图片

1382
来自专栏hrscy

iOS常见问题总结(一)1 Xcode中出现的问题

AEE851A3-CFC3-404C-B795-2B8D13992529.png 解决办法如下:

792
来自专栏编程微刊

如何在电脑上保存微信公众号文章封面图片?

3074
来自专栏张戈的专栏

分享一个多说头像的动态酷炫CSS样式

记得,之前看到 V 说分享了九种多说头像的酷炫样式,当时我选的是第八种,如下圆形旋转样式: ? (喜欢的可以去图中的 vsay 网址获取,我就不做搬运工了) 后...

3825
来自专栏无原型不设计

【Mockplus教程】页面属性

每个页面都具有独自的属性,通过页面属性对话框可以设置 页面的背景、统一字号以及相应平台的页面尺寸等。 打开需要添加或者查看备注信息的页面,在页面节点上面鼠...

3126
来自专栏ytkah

finecms栏目文章页seo设置

  finecms栏目页和文章页默认的标题是页面title_二级栏目title_一级栏目title_网站名称(比如:finecms怎么设置标题_finecms二...

2616

扫码关注云+社区