手对手的教你用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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
详解flex:1什么意思
Jul 23 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/11/18 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
window.onload使用指南
2015/09/13 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
康拓普公司Java笔面试
2016/09/23 面试题
法律工作求职自荐信
2013/10/31 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
售后服务承诺书
2014/03/26 职场文书
数据保密承诺书
2014/06/03 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
安全先进班组材料
2014/12/26 职场文书
认真学习保证书
2015/02/26 职场文书
开除通知书范本
2015/04/25 职场文书
升学宴祝酒词
2015/08/11 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python