當前環(huán)境下，大家都非常需要分享到朋友圈這個功能猿挚，但是實現(xiàn)起來各有心酸（坑比較多）咐旧，所以才有了如下的 canvas 繪圖工具

npm地址： https://www.npmjs.com/package/vue-poster

具有如下特性：

• 簡單易用 —— 一個 json 搞定繪制圖片
• 功能全 —— 滿足 90% 的使用場景
• 支持圓形圖片繪制（eg: 微信頭像圓形）[round: true]
• 繪制文本（換行、超出內(nèi)容省略號绩蜻、中劃線铣墨、下劃線、文本加粗）
• 繪制圖片
• 繪制矩形
• 保存圖片
• 多圖繪制 （支持回調(diào)）
• 導出圖片格式 jpg/png
  ...
• 代碼量小

API配置

/**
 * @description: 生成分享海報
 * @json {Array}
 * @return: String
 */

function canvasPosterInit (json, callback) {
  // 創(chuàng)建canvas對象
  var canvas = document.createElement('canvas')
  var ctx = canvas.getContext('2d')
  // 初始化canvas的寬高度
  canvas.width = json.width
  canvas.height = json.height
  canvasRect({ backgroundColor: '#fff', left: 0, top: 0, width: json.width, height: json.height }, ctx)
  canvasAll(json.views, 0, ctx, function () {
    canvasTranImg(canvas, json.quality, function (res) {
      callback(res)
    })
  })
}

/**
 * @description: 畫圖遞歸回調(diào)办绝，拋出最后一次回調(diào)
 * @param {type}
 * @return:
 */

function canvasAll (views, index, ctx, callback) {
  if (!views[index]) {
    callback()
    return false
  }
  switch (views[index].type) {
    case 'image':
      canvasImage(views[index], ctx, function () {
        canvasAll(views, ++index, ctx, callback)
      })
      break
    case 'text':
      canvasText(views[index], ctx, function () {
        canvasAll(views, ++index, ctx, callback)
      })
      break
    case 'rect':
      canvasRect(views[index], ctx, function () {
        canvasAll(views, ++index, ctx, callback)
      })
      break
  }
}

/**
 * @description: 畫方形 eg: 填充背景
 * @param {type}
 * @return:
 */

function canvasRect (item, ctx, callback) {
  ctx.fillStyle = item.backgroundColor || '#f0f'
  ctx.fillRect(item.left, item.top, item.width, item.height);
  (typeof callback === 'function') && callback()
}

/**

 * @description: 將圖片放在canvas對應位置
 * @item {Object}
 * @canvas {DOM}
 * @return: null
 */
function canvasImage (item, ctx, callback) {
  ctx.save()
  if (item.round) {
    var cx = item.left + item.width / 2
    var cy = item.top + item.width / 2
    ctx.arc(cx, cy, item.width / 2, 0, 2 * Math.PI)
    ctx.clip()
  }
  var img = new Image()
  img.src = item.src
  img.setAttribute('crossOrigin', 'Anonymous')
  img.onload = function () {
    ctx.drawImage(img, item.left, item.top, item.width, item.height)
    if (item.round) {
      ctx.restore()
    }
    (typeof callback === 'function') && callback()
  }
}

/**
 * @description: 將文字放在canvas對應位置
 * @item {Object}
 * @canvas {DOM}
 * @return: null
 */

function canvasText (item, ctx, callback) {
  ctx.fillStyle = item.color
  var fontStyle = (item.fontSize || 12) + 'px ' + (item.fontFamily || 'Microsoft YaHei')
  if (item.fontBold) {
    fontStyle = 'bold ' + fontStyle
  }
  ctx.font = fontStyle
  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  var txtArr = returnCanvasTextArr(item, ctx)
  var maxLineNumber = item.maxLineNumber || 2
  if (txtArr.length > maxLineNumber) {
    var _len = txtArr[maxLineNumber - 1].length
    txtArr[maxLineNumber - 1] = txtArr[maxLineNumber - 1].slice(0, _len - 1) + '...'
  }

  txtArr.every((conTxt, index) => {
    if (index >= maxLineNumber) {
      return false
    }
    ctx.fillText(conTxt, item.left, item.top + index * item.lineHeight)
    return true
  });
  (typeof callback === 'function') && callback()
}

/**
 * @description: 返回字符串需要的行
 * @item {Object}
 * @return: Array
 */

function returnCanvasTextArr (item, ctx) {
  var arr = []
  var lastIndex = 0
  if (ctx.measureText(item.content).width <= item.width) {
    arr.push(item.content)
  } else {
    for (var index = 1; index < item.content.length; index++) {
      if (ctx.measureText(item.content.slice(lastIndex, index)).width - item.width >= 0) {
        arr.push(item.content.slice(lastIndex, index))
        lastIndex = index
      }
    }
    arr.push(item.content.slice(lastIndex, item.content.length))
  }

  return arr.filter(function (s) {
    return s && s.trim()
  })
}

/**

 * @description: 將canvas轉(zhuǎn)換為圖片
 * @canvas {DOM} canvas對象
 * @callback {function} 成功回調(diào)函數(shù)
 * @return: base64
 */

function canvasTranImg (canvas, json, callback) {
  json.format === 'png' ? callback(canvas.toDataURL('image/png')) : callback(canvas.toDataURL('image/jpeg', json.quality || 1.0))
}

調(diào)用形式

  canvasPosterInit({
    width: '607',
    height: '700',
    quality: 1,
    views: [{
      type: 'image',
      width: '607',
      height: '400',
      left: 0,
      top: 0,
      src: 'https://vipadmin.chuanghehui.com/upload/pic/20200214/65fd6ef7b753304aab33359006693da3.jpg'
    },
    {
      type: 'text',
      content: '【我的天啊我的天啊我我的天啊我的天啊我的天啊我的天啊我的天啊我的天啊我的天天天天天天】',
      width: 580,
      fontSize: 20,
      fontFamily: 'Arial',
      color: '#000',
      left: 0,
      top: 450,
      maxLineNumber: 1,
      lineHeight: 30
    }]
  }, function (img) {
    var image = new Image()
    image.src = img
    image.onload = function () {
      document.body.appendChild(image)
    }
  })