手对手的教你用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悬停效果案例应用
Nov 21 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 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设置静态内容缓存时间的方法
2014/12/01 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
python urllib爬取百度云连接的实例代码
2017/06/19 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
python复合条件下的字典排序
2020/12/18 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
开业庆典主持词
2014/03/21 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
培训感想范文
2015/08/07 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers