你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

canvas生成图片

其他技术 练习 5003浏览 1评论

今天接到个小需求:前端生成个二维码并且以img标签的方式在web上展示出来。

二维码就不用说了,搜一下实现的各种插件一大堆,这里我用基于jquery的qrcode插件生成一枚。look~

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

然后个性化一下这个二维码,比如插入自己的logo或者照片什么的。因为canvas已经生成了,所以我们只需要拿来用就OK:

var Canvas = $(‘canvas’)[0];
var CRC = Canvas.getContext(‘2d’);
var img = new Image();
img.onload = function(){
draw(this);
};
img.src = ‘https://chengrang.com/demo/src/logo.png’;
function draw(obj){
CRC.drawImage(obj,100,100);
}

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

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

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

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


function showPic(){
var dataUrl = $(‘canvas’)[0].toDataURL(‘image/png’);
var newImg = ‘

create Img

‘;
newImg += ‘‘;
$(‘body’).append(newImg);
}

最后合起来看一下这个canvas和生成的img

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

如果你看的是转载的文章可能会因为安全策略的问题代码跑不起来报错,只要转到caihong.cc就OK了。

另外看到canvas和base64就不要再问低版本IE怎么兼容了吧……

转载请注明:练小习的前端技术笔记 » canvas生成图片

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 真高深,都在用HTML5了丫~
    firefore4年前 (2014-09-20)回复