share-poster v1.0.1

share-poster

Vue 插件项目-分享海报

概述

做了一个通过 css 属性画 canvas 分享图片海报的轻量级的 vue 组件 (A lightweight vue components use canvas draw image by css properties.)

具有如下特性：

• 可以多背景图进行选择
• 绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗)
• 绘制图片(圆角、旋转、边框)
• 绘制矩形(圆角、旋转、边框)
• 绘制二维码
• 渐变

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

运行例子

git clone https://gitee.com/cjxyfc/share-poster.git

npm i

npm run dev

安装

通过 npm 安装

# npm

npm i share-poster --save

使用组件

// 页面
import { sharePoster } from "share-poster";

components: {
  sharePoster;
}

// 全局注册
// ES6
import sharePoster from "share-poster";
// require
var sharePoster = require("sharePoster");

Vue.use(sharePoster);

使用属性

isShow: 是否显示
btnCtnClass: 按钮容器class
btnLeftClass: 左按钮class
btnRightClass: 有按钮class
views: 传入的json值
widthPixels: 整个视觉容器的宽度数值
saveCans: 处理图片的函数（见 事件 小节）
fail: 返回失败信息的函数（见 事件 小节）

template 作为组件的方式使用

<share-poster
  :sendIsShow="isShow"
  :sendBtnCtnClass="btnCtnClass"
  :sendBtnLeftClass="btnLeftClass"
  :sendBtnRightClass="btnRightClass"
  :sendViews="views"
  :widthPixels="widthPixels"
  @saveCans="saveCans"
  @fail="fail"
>
  <template #left>左按钮html</template>
  <template #right>右按钮html</template>
</share-poster>

作为方法的方式使用,暂无法使用 slot 功能

this.$showSharePoster(
  isShow,
  btnCtnClass,
  btnLeftClass,
  btnRightClass,
  views,
  widthPixels,
  saveCans,
  fail
);

views: {
  width: '280px',
  height: '400px',
  picture: {
    bgImgList: [
      {
        title: {
          text: '小样酸扣糖',
          css: {
            fontSize: '20px',
            left: '80px',
            top: '315px',
            maxLines: 1,
            width: '100px'
          }
        },
        url:
          'http://img3.imgtn.bdimg.com/it/u=1121732771,1817054332&fm=26&gp=0.jpg'
      },
      {
        title: {
          text: '旺旺碎冰冰',
          css: {
            fontSize: '20px',
            left: '80px',
            top: '315px',
            maxLines: 1,
            width: '100px'
          }
        },
        url:
          'http://img1.imgtn.bdimg.com/it/u=3317676671,2098880592&fm=26&gp=0.jpg',
        css: {
          mode: 'scaleToFill'
        }
      },
      {
        title: {
          text: '进女厕怎么啦',
          css: {
            fontSize: '20px',
            left: '80px',
            top: '315px',
            maxLines: 1,
            width: '100px'
          }
        },
        url:
          'http://img5.imgtn.bdimg.com/it/u=3022471729,1504607894&fm=26&gp=0.jpg'
      },
      {
        title: {
          text: '咱们这个村',
          css: {
            fontSize: '20px',
            left: '80px',
            top: '315px',
            maxLines: 1,
            width: '100px'
          }
        },
        url:
          'http://img2.imgtn.bdimg.com/it/u=2988118113,3334588401&fm=26&gp=0.jpg'
      },
      {
        title: {
          text: '呲牙哥',
          css: {
            fontSize: '20px',
            left: '80px',
            top: '315px',
            maxLines: 1,
            width: '100px'
          }
        },
        url:
          'http://img0.imgtn.bdimg.com/it/u=1996406715,1108825347&fm=26&gp=0.jpg'
      },
      {
        title: {
          name: '呵呵呵呵呵呵',
          css: {
            fontSize: '20px',
            left: '80px',
            top: '335px'
          }
        },
        url: 'http://img.sccnn.com/bimg/339/22088.jpg'
      }
    ],
    fgImgList: [
      {
        url:
          'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3256100974,305075936&fm=26&gp=0.jpg',
        css: {
          left: '17px',
          top: '322px',
          width: '55px',
          height: '55px',
          borderRadius: '27.5px'
        }
      }
    ],
    textList: [
      {
        text: '我的邀请码',
        css: {
          fontSize: '10px',
          color: '#333',
          left: '190px',
          top: '296px'
        }
      },
      {
        text: '邀请你加入女厕，',
        css: {
          fontSize: '12px',
          color: '#666',
          left: '80px',
          top: '345px'
        }
      },
      {
        text: '手机就能赚钱！',
        css: {
          fontSize: '12px',
          color: '#666',
          left: '80px',
          top: '365px'
        }
      }
    ],
    qrcodeList: []
  }
}

规范

Canvas 需要根据一定的规范来进行图片绘制，当然比直接画 canvas 简单的多。

调色板属性

一个调色板首先需要给予一些整体属性

background: 颜色值，默认为白色，支持渐变色
width: 宽度
height: 高度
borderRadius: 边框的圆角（该属性也同样适用于子类）
picture: 里面承载子类

Picture 属性

当我们把整体的调色板属性构建起来后，里面就可以通过 Picture 来进行绘制了。

image 属性

bgImage 可以设置成本地图片或者网络图片， 本地用 require()引入图片。 并且如果未设置 image 的长宽，则长宽的属性值会默认设为 auto。

imgCss 属性

scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

注：mode 属性和小程序 image 的 mode 属性功能一致，只是支持的类型只有两种，且默认值不同。 当 width 或 height 属性设置为 auto 时，mode 属性失效

text 属性

textCss 属性

当文字设置 width 属性后，则文字布局的最大宽度不会超过该 width 。如果内容超过 width，则会进行换行，如果此时未设置 maxLines 属性，则会把所有内容进行换行处理，行数由内容和 width 决定。如果此时设置了 maxLines 属性，则最大展示所设置的行数，如果还有多余内容未展示出来，则后面会带上 ... 。

rect 属性

qrcode 属性

布局属性

以上子类 ，除去自己拥有的特别属性外，还有以下的通用布局属性

相对布局方法

很多人有获得文本宽度的需求，因为文本宽度随着字数不同而动态变化，如果想在文本后面加个图标，那么我们就需要获得文本宽度。 解决方案如下：

1，首先你需要为检测长度的文本添加一个 id。如下
{
  id: 'my-text-id',
  type: 'text',

2，然后在后面的 view 中，你可以在 left 和 right 属性中使用这个id。如下
left: ['10px', 'my-text-id', 比例]
表示布局在距离左边（10px + 该text文本宽度 * 比例） 的距离，比例默认为 1，可省去，你也可以使用负数或小数来做计算，最终的 left 会加上文本宽度乘以该数的值。

注意：比例一定为一个 number

如果想获得高度，top 也支持上述用法，并且除文本外，你可以对任何 view 设置一个 id，然后使用上述方法进行相对布局。

注：相对布局的那个 view 代码一定需要在被相对的 view 的下面。

border 类型

align

Painter 的 align 类型与 css 中的 align 有些许不同。在 Painter 中 align 表示 view 本身的对齐方式，而不像 css 中表示对其子 view 的操作。align 可以作用在 Painter 支持的所有 view 上。它以设置的 left、top、right、bottom 的位置为基准，然后做不同的对齐操作。并且 align 在文字多行情况下，会影响多行文字的对齐方式。

注意：如果布局使用了 right 确定位置，则该 view 会默认右对齐布局，但此时文字还是从左边绘制。

CSS3 支持

shadow

shadow 可以同时修饰 image、rect、text、qrcode 等 。在修饰 text 时则相当于 text-shadow；修饰 image 和 rect 时相当于 box-shadow；修饰 qrcode 时，则相当于二维码有效区域的投影。

使用方法：

shadow: 'h-shadow v-shadow blur color';
h-shadow: 必需。水平阴影的位置。允许负值。
v-shadow: 必需。垂直阴影的位置。允许负值。
blur: 必需。模糊的距离。
color: 必需。阴影的颜色。

渐变色支持

你可以在画布的 background 属性或者 rect 的 color 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 view 中点，半径为最长边，目前不支持自己设置。

linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%)

radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)

！！！注意：颜色后面的百分比一定得写。

事件

saveCans

返回生成 base64 图片的本地 url，以及 tag （保存“1”，分享“2”）

  methods: {
    saveCans(tag, img64) {
      // 通过判断 tag 进行下一步操作的业务代码
    }
  }

fail

返回失败信息

 fail(err) {
      // 输出错误的业务代码
    }

Thanks

感谢 vue_canvas_poster 是根据该项目进行修改的，文档有不明白的可以查看 vue_canvas_poster