手对手的教你用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教程:background-clip和background-origin
Oct 17 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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 注释规范
2012/03/29 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
浅析Python中signal包的使用
2015/11/13 Python
python学生管理系统开发
2019/01/30 Python
Python中logging日志库实例详解
2020/02/19 Python
python的dict判断key是否存在的方法
2020/12/09 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
工程造价与管理专业应届生求职信
2013/11/23 职场文书
货车司机岗位职责
2014/03/18 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
迎新年主持词
2015/07/06 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers