手对手的教你用canvas画一个简单的海报

cyixlq 发布于2019-08-30 15:54 / 3389人阅读

摘要：啦啦啦，首先说下需求，产品想让用户在我们内，分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后，如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片，是个不错的东西。

啦啦啦，首先说下需求，产品想让用户在我们app内，分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后，如何生成这张海报呢~~~
首先我们老大告诉我有一个插件叫html2canvas、其作用就是可以将dom节点转化成图片，是个不错的东西。我试验了下、确实可以，但~这个插件有点大啊，为了满足海报的这个需求引入这么大的东西感觉很亏！！！所以，还是自己画一个~
首先先上效果图

当当当当~~~最后生成的海报中包括头像和姓名与二维码，当然图上的二维码是百度的二维码~最后生成base64用以分享到各大平台。
废话不多说，上代码（这个代码没有整理，因为懒。。。）

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了然后就可以使用啦。

GPU云服务器云服务器教你用阿里云开我的世界服务器 html画一个手教你用一个教你开发小程序的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117026.html

手对手的教你用canvas画一个简单的海报

摘要：啦啦啦，首先说下需求，产品想让用户在我们内，分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后，如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片，是个不错的东西。啦啦啦，首先说下需求，产品想让用户在我们app内，分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后，如何生成这张海报呢~~~首...

verano 2019-08-23 13:57 评论0 收藏0
手对手的教你用canvas画一个简单的海报

摘要：啦啦啦，首先说下需求，产品想让用户在我们内，分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后，如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片，是个不错的东西。啦啦啦，首先说下需求，产品想让用户在我们app内，分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后，如何生成这张海报呢~~~首...

BlackHole1 2019-08-02 12:13 评论0 收藏0
撩妹技能 get，教你用 canvas 画一场流星雨

摘要：现在就一起来做一场流星雨，用程序员的野路子浪漫一下。要画一场流星雨，首先，自然我们要会画一颗流星。画一颗流星是的，的却是没这个，但是不代表我们画不出来。而我们每一帧要保留的就是，上一帧透明度的流星，覆盖画布黑色矩形我们不能显示。开始妹子都喜欢流星，如果她说不喜欢，那她一定是一个假妹子。现在就一起来做一场流星雨，用程序员的野路子浪漫一下。要画一场流星雨，首先，自然我们要会画一颗流...

cc17 2019-08-21 11:37 评论0 收藏0
Canvas绘图在微信小程序中的应用:生成个性化海报

摘要：解析进到首页其实关键字在本地就随机取完了，在首页中的方法中就通过缓存了要画的元素，比如关键字这里是图片关键字解析语也是图片毕竟微信小程序的不支持字体等等。一、Canvas应用的背景(个人理解)及基础语法背景从2012年开始，微信那个时候用户的积累的量已经非常大了，推出公众号，当然大屏智能手机在那个时候也流行，传统的大众媒体逐步消亡，像微信公众号这样的新媒体盛行。企业的广告投入开始...

vpants 2019-08-23 12:11 评论0 收藏0