canvas生成图片

练小习

发布于 2017-12-29 15:05:23

2.4K0

发布于 2017-12-29 15:05:23

文章被收录于专栏：练小习的专栏

今天接到个小需求：前端生成个二维码并且以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：

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

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

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

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

最后合起来看一下这个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怎么兼容了吧……

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

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

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

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

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

登录后参与评论

0 条评论

热度