黑松山资源网 Design By www.paidiu.com
啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后,如何生成这张海报呢~~~
首先我们老大告诉我有一个插件叫html2canvas、其作用就是可以将dom节点转化成图片,是个不错的东西。我试验了下、确实可以,但~这个插件有点大啊,为了满足海报的这个需求引入这么大的东西感觉很亏!!!所以,还是自己画一个~
首先先上效果图
当当当当~~~最后生成的海报中包括头像和姓名与二维码,当然图上的二维码是百度的二维码~最后生成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了 然后就可以使用啦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行
- 黑神话悟空上品蝎太子精魄获取方法一览|上品蝎太子精魄收集攻略
- 银霞.1977-《台北66电影原声带》台湾复刻版[WAV+CUE]
- 银霞.1980-《你那好冷的小手》台湾珍藏纪念版[WAV+CUE]