指定类型和坐标系的海报合成图片vue-canvas-poster

该插件的优点如下：使用npm安装，简单易懂，功能强大，可以设置widthPixels设定图片尺寸，解决图片模糊问题

功能特点：

        绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗、文字缩进)

        绘制图片(圆角、旋转、边框、模式:类似小程序 image mode)

        绘制矩形(圆角、旋转、边框)

        绘制二维码

        渐变，阴影

版本安装：

cnpm i vue-canvas-poster --save

备注：安装1.0.0版本和1.0.0以下版本语法有差异，本案例以1.0.0版本以上为例

版本引入一之全局注册main.js：

import Vue from 'vue'

import VueCanvasPoster from 'vue-canvas-poster'

Vue.use(VueCanvasPoster)

页面中引入方式

<script>

import { VueCanvasPoster } from 'vue-canvas-poster'

export default {

components: {

        VueCanvasPoster

        }

}

代码片段以及参数类型：

<template>
  <div>
    <vue-canvas-poster :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        painting: {
          width: '550px',  //画布宽度-必填
          height: '876px',  //画布高度-必填 
          backgroundColor: '#f4f5f7', //画布背景色-非必填-默认:#ffffff
          debug:false,  //调试模式-非必填-默认值:false
          views: [  //存放画布内元素数据，必填array 仅支持 text、image、rect、qrcode
             // text设置属性
             {
              type: 'text',    //类型
              text: '我是文本内容', //文本内容
              css: {
                fontSize:'12px', // 字体大小-默认值：20px-非必填写
                color:'#000000', //默认值：black-非必填写
                width:'100px', //换行宽度，当文字长度大于这个值，换行-非必填写
                maxLines:5, //最大行数-非必填  和width一起使用才能超出。。。
                lineHeight:'10px', //行高-默认值等于fontSize-非必填
                fontWeight:'400', // 字体粗细 默认：normal
                textDecoration:'underline', //文本修饰符可选【 underline、 overline、 line-through】，可组合使用
                textStyle:'fill', //fill： 填充样式，stroke：镂空样式  默认值：fill
                fontFamily:'sans-serif', //字体，需引入字体
                background:'', //文字背景色
                padding:'0px',//文字背景颜色边际与文字间距
                textAlign:'left',// 文字的对齐方式，分为 left, center, right，view 的对齐方式请看 align 属性
                textIndent:'0px',//文字首行缩进
                top: '20px',  //距离画布顶部距离
                left: '36px',//距离画布左边距离
                rotate:'45deg', //旋转角度
                opacity:'1', //透明度
                shadow:'10px 10px 5px #888888', //阴影
                borderRadius: '40px', //圆角
                borderWidth:'1px', //边界宽度，外边界
                borderColor:'#fff',//边框颜色
                borderStyle:'solid' //边框样式，支持 dashed、dotted、solid （v1.2.0新增）
              }
            },
             //图片可设置属性
            {
              type: 'image',
              url: require('./assets/avatar.jpg'), //一定要注意图片跨域问题
              css: {
                top: '20px', //距离画布顶部距离
                left: '36px',//距离画布左边距离
                rotate:'45deg', //旋转角度
                borderRadius: '40px',//圆角
                width: '80px', //图片展示宽度
                height: '80px',//图片展示高度 //不设置就是auto
                mode:'aspectFill', //图片裁剪方式  aspectFill：充满图片大小  aspectFill：保持最短边显示，长边有可能被截取
                shadow:'10px 10px 5px #888888', //阴影
                borderRadius: '40px', //圆角
                borderWidth:'1px', //边界宽度，外边界
                borderColor:'#fff',//边框颜色
                borderStyle:'solid' //边框样式，支持 dashed、dotted、solid （v1.2.0新增）
              }
            },
            // 绘制rect
             {
              type: 'rect',
              css: {
                top: '20px', //距离画布顶部距离
                left: '36px',//距离画布左边距离
                rotate:'45deg', //旋转角度
                borderRadius: '40px',//圆角
                width: '80px', //图片展示宽度
                height: '80px',//图片展示高度 //不设置就是auto
                color:'#000000', //填充颜色
                color: 'linear-gradient(120deg, #fccb90 0%, #d57eeb 100%)',// 可以填写颜色 也可以设置渐变颜色
                shadow:'10px 10px 5px #888888', //阴影
                borderRadius: '40px', //圆角
                borderWidth:'1px', //边界宽度，外边界
                borderColor:'#fff',//边框颜色
                borderStyle:'solid' //边框样式，支持 dashed、dotted、solid （v1.2.0新增）
              }
            },
            // 绘制qrcode
             {
              type: 'qrcode',
              content: 'https://github.com/sunniejs/vue-canvas-poster',
              css: {
                top: '20px', //距离画布顶部距离
                left: '36px',//距离画布左边距离
                rotate:'45deg', //旋转角度
                borderRadius: '40px',//圆角
                width: '80px', //图片展示宽度
                height: '80px',//图片展示高度 //不设置就是auto
                color: '#000', //二维码颜色 默认黑色black
                shadow:'10px 10px 5px #888888', //阴影
                borderRadius: '40px', //圆角
                borderWidth:'1px', //边界宽度，外边界
                borderColor:'#fff',//边框颜色
                borderStyle:'solid' //边框样式，支持 dashed、dotted、solid （v1.2.0新增）
              }
            },
          ]
        }
      }
    },
    methods: {
      // 图片生成成功返回base64图片
      success(src) {
        console.log(src)
      },
      // 生成失败
      fail(err) {
        console.log('fail', err)
      }
    }
  }
</script>

详细文档：Vue Canvas Poster

base64路径路径转化成File

function base64ToFile(base64Data,filename = 'file') {
      let arr = base64Data.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let suffix = mime.split('/')[1]
      let bstr = window.atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
      }
      return  new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
    }

base64图片地址转blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

最后推荐一波：使用html编写样式，通过html2canvas大方式将html转化成图片，也是可行方案。