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 条评论
登录 后参与评论

相关文章

来自专栏软件工程师成长笔记

火星坐标拾取工具

在国内必须至少使用GCJ-02的坐标系,而GCJ-02,“火星坐标”是在国内最广泛使用的坐标体系。那么,我们就来看看,如何直接获取到GCJ-02坐标呗。 请大...

2042
来自专栏转载gongluck的CSDN博客

MFC ActiveX (ocx)控件的开发

前言 ActiveX是Microsoft对于一系列策略性面向对象程序技术和工具的称呼,其中主要的技术是组件对象模型(COM)。 ActiveX控件是一种实现...

6057
来自专栏EAWorld

像踢球一样玩转Redux和React

引言 React的核心是使用组件定义界面的表现,是一个View层的前端库,简单来说它就是一堆前端组件,view,view,view,重要的事情...

2827
来自专栏数据小魔方

DIY你的菜单和工具栏,订制属于你自己的工作界面!

DIY你的菜单工具栏 订制自己的专属工作界面! 今天是小魔方的第二篇推送,教程是昨晚熬夜写的,但是平台限制订阅号每天只能发送一篇推送,所以才拖到现在! 平时我...

2788
来自专栏葡萄城控件技术团队

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Des...

1572
来自专栏Danny的专栏

&nbsp在IE和FireFox中显示不一致

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

853
来自专栏Java后端技术

欠的债,这一次都还给你们

  前段时间,写的一篇关于博客园主题皮肤分享的文章,一经发出便受到了极大的热捧,后来很多网友留言说,想要让我分享现在的模板,毕竟现在这个模板已经比之前分享的那个...

1123
来自专栏编程

前端面试三 新的一周

哈哈哈 1. 对WEB标准以及W3C的理解与认识? 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下...

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

iOS 一个可滑动缩放的轮播图

1916
来自专栏Crossin的编程教室

Python的门面担当

在大多数时候,我们都在黑黢黢的控制台里执行 Python 脚本。这看起来很酷很 GEEK。但对于部分场景下的用户来说,这样就不大美观和人性化了:我们需要交互更方...

1604

扫码关注云+社区