手对手的教你用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 Backgrounds属性相关介绍
May 11 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
几种响应式文字详解
2017/05/19 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python 标准差计算的实现(std)
2019/07/29 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
python 实现波浪滤镜特效
2020/12/02 Python
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
Servlet方面面试题
2016/09/28 面试题
金融专业应届生求职信
2013/11/02 职场文书
学生会主席竞聘书
2014/03/31 职场文书
大学生见习报告总结
2014/11/04 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
学子宴致辞大全
2015/07/27 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书