手对手的教你用canvas画一个简单的海报的方法示例


Posted in HTML / CSS onDecember 10, 2018

啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后,如何生成这张海报呢~~~
首先我们老大告诉我有一个插件叫html2canvas、其作用就是可以将dom节点转化成图片,是个不错的东西。我试验了下、确实可以,但~这个插件有点大啊,为了满足海报的这个需求引入这么大的东西感觉很亏!!!所以,还是自己画一个~

首先先上效果图

手对手的教你用canvas画一个简单的海报的方法示例

当当当当~~~最后生成的海报中包括头像和姓名与二维码,当然图上的二维码是百度的二维码~最后生成base64用以分享到各大平台。

废话不多说,上代码(这个代码没有整理,因为懒。。。)

<canvas id="myCanvas" width="750" height="1200" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>

dom节点很简单,生成个canvas标签随意写点属性就可以了~

var canvas = document.getElementById("myCanvas");   //获取canvas节点
function imageToCanvas(canvas,url1,url2,code) {      //传入canvas节点 背景图url1  头像url2 二维码code
    var ctx = canvas.getContext("2d");  
    var img1 = new Image();                               
    img1.src = url1;                     //前面的不解释了,生成个图片
    img1.onload = function(){ 
        ctx.drawImage(img1,0,0);              //当图片加载完成后 赋到画布上 从0 0 开始。
        var img2 = new Image();
         img2.src = url2;
         img2.onload = function(){
          ctx.save();                            //保存当前画布状态
          ctx.arc(374, 134, 44, 0, 2 * Math.PI);    //剪切操作 将正方形的头像切成圆的
          // 从画布上裁剪出这个圆形
          ctx.clip();                             //进行裁剪
          ctx.drawImage(img2, 330, 90, 88, 88);   //放入img2 在330 90坐标处     大小 88
          ctx.restore();                           //释放画布状态
          ctx.font="28px Arial";
          ctx.textAlign="center";
          ctx.fillStyle ='#FFFFFF';               //前面是设置文字 属性设为居中
          ctx.fillText("你叫神马名字",375,220);     //文字 这里是写死的 实际中多传个参数就ok
          var img3 = new Image();
          img3.src = code;
          img3.onload = function() {
              ctx.drawImage(img3,136,554,478,478);      //同理加图像
              var imgCode = convertCanvasToImage(canvas);    //将图片转为base64
              console.log(imgCode.getAttribute('src'))
          }

         }
    }

}
imageToCanvas(canvas,"1.png",'3.jpeg','code.png');            //初始化


function convertCanvasToImage(canvas) {
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png");            //canvas转化为img
    return image;
}

这样就可以得到一个base64了 然后就可以使用啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 #HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 #HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 #HTML / CSS
canvas探照灯效果的示例代码
Nov 30 #HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 #HTML / CSS
canvas拼图功能实现代码示例
Nov 21 #HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 #HTML / CSS
You might like
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python 变量类型详解
2018/10/10 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python向图片里添加文字
2019/11/26 Python
Python读取csv文件实例解析
2019/12/30 Python
工厂会计员职责
2014/02/06 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
小学生植树节活动总结
2014/07/04 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
导游词之阆中古城
2019/12/23 职场文书
python实现会员管理系统
2022/03/18 Python