手对手的教你用canvas画1个简易的海报的方式示例

日期:2021-02-23 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

啦啦啦,最先说下要求,商品想让客户在大家app内,共享1张照片到手机微信、qq等服务平台。照片中包括客户的名字、头像、和带着自身信息内容的2维码。随后,怎样转化成这张海报呢~~~
最先大家大哥告知我有1个软件叫html2canvas、其功效便是能够将dom连接点转换成照片,是个非常好的物品。我实验了下、的确能够,但~这个软件有点大啊,以便考虑海报的这个要求引进这么大的物品觉得很亏!!!因此,還是自身画1个~

最先先上实际效果图

铛铛铛铛~~~最终转化成的海报中包含头像和名字与2维码,自然图上的2维码是百度搜索的2维码~最终转化成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 2维码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;
}

这样便可以获得1个base64了 随后便可以应用啦。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:Html5网页页面内应用JSON动漫的完成 返回下一篇:没有了