js生成海报.gif

直接上代码

  1. /*生成海报
  2.  *@method createPoster
  3.  *@for
  4.  *@param{对象}options options.target;options.bgUrl;options.coverUrl;options.footUrl;options.title;options.number;options.scoreLabel;options.score;options.content;options.qrcode;
  5.  *@return {void}
  6. */
  7. function createPoster(options) {
  8.     options = options ? options : {};
  9.     if(typeof options !== 'object') return;
  10.     // 创建画布
  11.     var canvas = document.createElement('canvas');
  12.     var ctx = canvas.getContext('2d');
  13.     var canvasWidth = 680; // 画布宽带
  14.     var topHeight = 0;
  15.     if(!options.content) return;
  16.     // 计算高度
  17.     function workHeight() {
  18.         ctx.font = '32px PingFang SC';
  19.         ctx.textAlign = 'left';
  20.         ctx.lineWidth=1;
  21.         var lineWidth = 0;
  22.         var contentWidth = 606;//计算canvas的宽度
  23.         var initHeight=0;//绘制字体距离canvas顶部初始的高度
  24.         var str = options.content;
  25.         for(let i=0;i<str.length;i++){ 
  26.             lineWidth+=ctx.measureText(str[i]).width; 
  27.             if(lineWidth>contentWidth){  
  28.                 initHeight+=44;//字体的行高
  29.                 lineWidth=0;
  30.                 lastSubStrIndex=i;
  31.             }
  32.         }
  33.         topHeight = 580 + initHeight;
  34.         return topHeight + 181;
  35.     }
  36.     canvas.width = canvasWidth;
  37.     var canvasHeight = workHeight();
  38.     canvas.height = canvasHeight;
  39.     // 绘制白色背景
  40.     ctx.fillStyle="#ffffff";
  41.     ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  42.     // 绘制测试图片
  43.     function drawBg() {
  44.         if(!options.bgUrl) return;
  45.         var img = new Image();
  46.         img.setAttribute("crossOrigin", "anonymous");
  47.         img.onload = function() {
  48.             ctx.drawImage(img, 31, 37, 618, 349);
  49.             drawBgCover();
  50.         }
  51.         img.src = options.bgUrl;
  52.     }
  53.     // 绘制蒙层
  54.     function drawBgCover() {
  55.         if(!options.coverUrl) return;
  56.         var img = new Image();
  57.         img.setAttribute("crossOrigin", "anonymous");
  58.         img.onload = function() {
  59.             ctx.drawImage(img, 31, 37, 618, 349);
  60.             drawTitle();
  61.         }
  62.         img.src = options.coverUrl;
  63.     }
  64.     // 绘制测试标题
  65.     function drawTitle() {
  66.         if(!options.title) return;
  67.         var lineCount = 12;
  68.         var maxLine = 3;
  69.         var maxWidth = 620;
  70.         var position = {
  71.             '1': [186],
  72.             '2': [157, 209],
  73.             '3': [135, 180, 225]
  74.         }
  75.         if(options.title.length > lineCount*maxLine){
  76.             options.title = options.title.substring(0, lineCount*maxLine-3) + '...';
  77.         }
  78.         var titleList = [];
  79.         for(var i = 0; i < options.title.length; i+=12) {
  80.             titleList.push(options.title.substring(i, i+12));
  81.         }
  82.         ctx.fillStyle = "#fff";
  83.         ctx.font = '40px PingFang SC';
  84.         ctx.textAlign = 'center';
  85.         // 每行显示12个字
  86.         for(var l = 0; l < titleList.length; l++) {
  87.             ctx.fillText(titleList[l], canvasWidth/2, position[titleList.length][l], maxWidth);
  88.         }
  89.         drawTested();
  90.     }
  91.     // 绘制已有多少人测试
  92.     function drawTested() {
  93.         if(!options.number) return;
  94.         options.number = options.number > 9999 ? (options.number*1/10000).toFixed(2) + 'w' : options.number;
  95.         ctx.fillStyle = "#fff";
  96.         ctx.font = '24px PingFang SC';
  97.         ctx.textAlign = 'center';
  98.         ctx.fillText(options.number + '人已测试', canvasWidth/2, 305)
  99.         drawScoreLabel();
  100.     }
  101.     // 绘制指数
  102.     function drawScoreLabel() {
  103.         if(!options.scoreLabel) return;
  104.         ctx.fillStyle = "#333";
  105.         ctx.font = '32px PingFang SC';
  106.         ctx.textAlign = 'left';
  107.         ctx.fillText(options.scoreLabel+'：', 91, 455);
  108.         drawScore();
  109.     }
  110.     // 绘制测试结果
  111.     function drawScore() {
  112.         if(!options.score || options.score.length != 5) return;
  113.         function renderStar(url, x, y) {
  114.             var img = new Image();
  115.             img.setAttribute("crossOrigin", "anonymous");
  116.             img.onload = function() {
  117.                 ctx.drawImage(img, x, y, 48, 46);
  118.             }
  119.             img.src = url;
  120.         }
  121.         for(var i = 0; i < options.score.length; i++) {
  122.             renderStar(options.score[i], 280 + 60*i, 418);
  123.         }
  124.         drawContent();
  125.     }
  126.     function drawContent() {
  127.         if(!options.content) return;
  128.         ctx.fillStyle = "#333";
  129.         ctx.font = '32px PingFang SC';
  130.         ctx.textAlign = 'left';
  131.         var lineWidth = 0;
  132.         var contentWidth = 606;//计算canvas的宽度
  133.         var initHeight = 530;//绘制字体距离canvas顶部初始的高度
  134.         var lastSubStrIndex= 0; //每次开始截取的字符串的索引
  135.         var str = options.content;
  136.         for(let i=0;i<str.length;i++){ 
  137.             lineWidth+=ctx.measureText(str[i]).width; 
  138.             if(lineWidth>contentWidth){  
  139.                 ctx.fillText(str.substring(lastSubStrIndex,i), 34, initHeight);//绘制截取部分
  140.                 initHeight+=44;//字体的行高
  141.                 lineWidth=0;
  142.                 lastSubStrIndex=i;
  143.             } 
  144.             if(i==str.length-1){//绘制剩余部分
  145.                 ctx.fillText(str.substring(lastSubStrIndex,i+1), 34, initHeight);
  146.             }
  147.         }
  148.         drawFoot();
  149.     }
  150.     // 绘制底部图
  151.     function drawFoot() {
  152.         if(!options.footUrl) return;
  153.         var img = new Image();
  154.         img.setAttribute("crossOrigin", "anonymous");
  155.         img.onload = function() {
  156.             ctx.drawImage(img, 0, topHeight, canvasWidth, 181);
  157.             drawQrcode();
  158.         }
  159.         img.src = options.footUrl;
  160.     }
  161.     // 绘制二维码， 插件见http://jeromeetienne.github.com/jquery-qrcode/
  162.     function drawQrcode() {
  163.         if(!options.qrcode) return;
  164.         $('body').append('<div id="qrcode" style="display:none"></div>');
  165.         var qrcode = new QRCode(document.getElementById("qrcode"), {
  166.             width: 128,
  167.             height: 128,
  168.         });
  169.         qrcode.makeCode(options.qrcode);
  170.         var img = document.querySelector('img[alt="Scan me!"]');
  171.         // var newImg = new Image();
  172.         // console.log(newImg);
  173.         // console.log(img);
  174.         img.onload = function() {
  175.             ctx.drawImage(img, 521, topHeight+12, 120, 120);
  176.             createImg();
  177.         }
  178.     }
  179.     function createImg() {
  180.         var target = options.target ? options.target : 'body';
  181.         let dataImg = new Image();
  182.         dataImg.className = "img";
  183.         dataImg.src = canvas.toDataURL("image/jpeg");
  184.         $(target).append(dataImg);
  185.     }
  186.     drawBg();
  187.     // $(target).append(canvas);
  188. }；
  190. // 如何使用
  191. createPoster({
  192.     target: '.poster-img', // 海报容器的选择器
  193.     bgUrl: '../imgs/canvas_bg.png', // 背景图片地址
  194.     coverUrl: '../imgs/canvas_cover.png', // 背景上层滤镜图片
  195.     footUrl: '../imgs/canvas_foot.png', // 底部图片
  196.     title: '阿斯顿开发了到首都发生地方阿撒撒首都发生的家等奖分拉卡三等奖流口水的', // 标题
  197.     number: 12342, // 观看数量
  198.     scoreLabel: '异性缘指数', // 成绩Label
  199.     score: ['../imgs/canvas_sa.png', '../imgs/canvas_sa.png', '../imgs/canvas_sa.png', '../imgs/canvas_sa.png', '../imgs/canvas_sd.png'], // 星星评分图片地址数组
  200.     content: '你的异性缘不错，也知道如何讨人欢喜，你是一个贴心的人，会分析对方是怎么想的，怎样让大家都开心，你喜欢暧昧，但不确定自己的内心，是否应该确定其中一个为自己的固定玩伴或爱人，再进一步，你就是受欢迎高手了。你的异性缘不错，也知道如何讨人欢喜，你是一个贴心的人，会分析对方是怎么想的，怎样让大家都开心，你喜欢暧昧，但不确定自己的内心，是否应该确定其中一个为自己的固定玩伴或爱人，再进一步，你就是受欢迎高手了。你的异性缘不错，也知道如何讨人欢喜，你是一个贴心的人，会分析对方是怎么想的，怎样让大家都开心，你喜欢暧昧，但不确定自己的内心，是否应该确定其中一个为自己的固定玩伴或爱人，再进一步，你就是受欢迎高手了。你的异性缘不错，也知道如何讨人欢喜，你是一个贴心的人，会分析对方是怎么想的，怎样让大家都开心，你喜欢暧昧，但不确定自己的内心，是否应该确定其中一个为自己的固定玩伴或爱人，再进一步，你就是受欢迎高手了。', // 内容
  201.     qrcode: 'http://www.baidu.com' // 二维码内容
  202. });