• 小程序---canvas画图,生成分享图片,画图文字换行


    小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能。

    具体思路及简要代码如下:

    一:canvas画图
      drawCanvas:function(){
        var that = this;
        var contentPic = '/images/pop_pic_default@2x.png'
        wx.downloadFile({     //当图片为网络图片时,需要先下载到本地,再进行操作,
          url: contentPic,        //否则canvas会加载不到图片,本地的无需这步骤
          success: function (res) {
            contentPic = res.tempFilePath
          }
        })
        var  ctx = wx.createCanvasContext('shareImg')
        ctx.fillStyle = '#fff'    //这里两句是为了解决canvas生成图片时黑背景的问题
        ctx.fillRect(0, 0, 562, 788)   //填充白色背景
        ctx.setFontSize(32)
        ctx.setFillStyle('#333')  
        ctx.setTextAlign('left')
        ctx.setTextBaseline('middle')
        var str = '这是标题'
        this.changLine(true,str,ctx,40,60,36,482)
        var sourse = that.data.detail.source
        ctx.setFontSize(28)
        ctx.fillText(sourse, 40, this.data.titleY)
        var date = that.data.detail.publishDate
        var sourseX = ctx.measureText(sourse).width+56
        ctx.setFontSize(24)
        ctx.setFillStyle('#999')
        ctx.fillText(date, sourseX, this.data.titleY)
        var content = that.data.detail.summary.replace(/(^s*)|(s*$)/g, "")
        ctx.setFontSize(28)
        ctx.setFillStyle('#666')
        this.changLine(false,content, ctx, 40, this.data.titleY + 60, 36, 482)
        var picY = this.data.titleY + 168
        wx.getImageInfo({
          src: contentPic,
          success: function (res) {
            var widthScale = 482 / res.width
            var heightScale = 250 / res.height
            var sx=0,sy=0
            if (widthScale>heightScale){
              sy=  (res.height-250/(482 / res.width))/2
            }
            else{
              sx=(res.width-482/(250 / res.height))/2
            }
            ctx.drawImage(contentPic, sx, sy, res.width - sx * 2, res.height - sy * 2, 40, picY, 482, 250 )
           ctx.moveTo(40, picY + 274)
           ctx.setStrokeStyle('#dedede')
           ctx.lineTo(522, picY + 274)
           ctx.stroke() 
           ctx.setFontSize(28)
           ctx.setFillStyle('#666')
           ctx.fillText('长按扫码阅读', 40, picY + 334)
           ctx.setFontSize(24)
           // ctx.setFillStyle('#666')
           ctx.fillText('全文约' + that.data.detail.wordCount + '字,约' + that.data.detail.readingTime + '分钟', 40, picY + 382)
           // var qrcode = '/images/pic_nanbaobao@2x.png'
           // ctx.drawImage(qrcode, 344, picY + 274, 178, 178)
           var logo = '/images/ic_xiaochnegxu@2x.png'
           ctx.drawImage(logo, 397, picY + 315, 72, 72)
           ctx.draw(false, function (e) {
             that.createPoster()
           }
           )
          }
        })
       
      },
      //画图文字换行,内容、画布、初始x、初始y、行高、画布宽
      changLine: function (isTitle,str, ctx, initX, initY, lineHeight, canvasWidth){
          
        // 字符分隔为数组
        var arrText = str.split('');
        var line = '';
        var lineCount=0;
        var isThreeLine=false;
        for (var n = 0; n < arrText.length; n++) {
          var testLine = line + arrText[n];
          var testWidth = ctx.measureText(testLine).width;
          if (testWidth > canvasWidth) {
            if (lineCount==2) {
              isThreeLine=true
              var length = line.length-2;
              line = line.substring(0, length)+'...';
              ctx.fillText(line, initX, initY);
              return false;
            }
            lineCount++;
          
            ctx.fillText(line, initX, initY);
            line = arrText[n];
            initY += lineHeight;
           
          } else {
            line = testLine;
          }
          
        }
        if (!isThreeLine){
          ctx.fillText(line, initX, initY);
        }
          //记录标题的高度
        if (isTitle){
          this.setData({
            titleY: initY + lineHeight + 8
          })
          }
      },
    //生成海报
      createPoster:function(){
        var that = this
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
           562,
          height: 788,
          destWidth: 1124,
          destHeight: 1576,
          canvasId: 'shareImg',
          fileType: 'jpg',
          success: function (res) {
            that.setData({
              prurl: res.tempFilePath
            })
            wx.hideLoading()
          }
        })
      },

    大概就这样,若发现问题,请评论指正~

  • 相关阅读:
    border-image
    实现页面变成灰色色调
    ie 浏览器“浏览器模式”和“文档模式”之间的区别
    vue-loader
    vue-cli创建的项目中使用sass
    v-html
    vue $forceUpdate 强制更新
    webpack-dev-server 不是内部命令
    vue devtools 以及热更新
    事件机制
  • 原文地址:https://www.cnblogs.com/lichunyan/p/8963584.html
Copyright © 2020-2023  润新知