手对手的教你用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 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
python collections模块的使用
2020/10/16 Python
素质拓展感言
2014/01/29 职场文书
初三学习决心书
2014/03/11 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书