vue- canvas生成海报图

此图为生成的海报图。

git链接：https://github.com/sunniejs/vue_canvas_poster

1、通过cnpm安装

cnpm i vue-canvas-poster --save

2、引用

 import {vueCanvasPoster} from 'vue-canvas-poster'
components: {
            vueCanvasPoster
        },

3、全局注册-在main.js中引用

/*canvas*/
import CanvasPoster from 'vue-canvas-poster'

Vue.use(CanvasPoster)

 4、html

<div class="content_container">
        <vue-canvas-poster :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
        <img :src="posterImg">
    </div>

5、data

posterImg: '',//生成的海报
                painting: {
                    width: '550px',
                    height: '876px',
                    background: 'https://ddcz.oss-cn-beijing.aliyuncs.com/images/file-1587004539522R5oa.png',
                    views: [{
                        type: 'image',
                        url: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIxbEZu0fBQOYlTLTpqtoezkNiaCBQ4ZXZAKhvPiaFAdI91vBsUkpiaDH4mp4qGvcVo2EaxRrp5fMia8w/132',
                        css: {
                            top: '20px',
                            left: '36px',
                            borderRadius: '40px',
                            width: '80px',
                            height: '80px',
                        },
                    }, {
                        type: 'text',
                        text: '我的名字',
                        css: {
                            top: '48px',
                            left: '136px',
                            width: '360px',
                            maxLines: 1,
                            fontSize: '26px',
                        },
                    }, {
                            type: 'qrcode',
                            content: 'https://zy.jishiyoo.com/m/card/group?key=5PCxqmV7oF3D0wx3WnbnPLRlbunt7A',
                            css: {
                                bottom: '50px',
                                right: '26px',
                                color: '#000',
                                background: '#fff',
                                width: '130px',
                                height: '130px',
                                borderWidth: '10px',
                                borderColor: '#fff'
                            },
                        },],
                },

6、js

//成功生成海报
            success(src) {
                this.posterImg = src;
                console.log(src)
            },
            fail(err) {
                alert(err)
            },

7、css

img {
        width: 100%;
        height: 100%;
    }

 

 

规范

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

调色板属性

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

background: 可以是颜色值，也可以为网络图片的链接，默认为白色，支持渐变色
width: 宽度
height: 高度
borderRadius: 边框的圆角（该属性也同样适用于子 view）
views: 里面承载子 view

View 属性

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

type	内容	description	自有css
image	url	表示图片资源的地址，本地或网络	见 image 小节
text	text	文本的内容	见 text 小节
rect	无	矩形	color: 颜色，支持渐变色
qrcode	content	画二维码	background: 背景颜色（默认为透明色）color: 二维码颜色（默认黑色）

image

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

属性名称	说明	默认值
width	image的宽度	auto
height	image的高度	auto
mode	图片裁剪、缩放的模式	aspectFill

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

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

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

text

因为 text 的特殊性，此处对 text 进行单独说明。

属性名称	说明	默认值
fontSize	字体大小	20px
color	字体颜色	black
maxLines	最大行数	不限，根据 width 来
lineHeight	行高（上下两行文字baseline的距离）	fontSize 大小
fontWeight	字体粗细。仅支持 normal, bold	normal
textDecoration	文本修饰，支持 underline、 overline、 line-through，也可组合使用	无效果
textStyle	fill： 填充样式，stroke：镂空样式	fill
fontFamily	字体	sans-serif
background	文字背景颜色	无
padding	文字背景颜色边际与文字间距	0px
textAlign	文字的对齐方式，分为 left, center, right，view 的对齐方式请看 align 属性	left

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

布局属性

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

属性	说明	默认
rotate	旋转，按照顺时针旋转的度数	不旋转
width、height	view 的宽度和高度，其中 image 和 text 可不设置
top、right、bottom、left	如 css 中为 absolute 布局时的作用，可为 负值	默认 top 和 left 为 0

相对布局方法

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

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 类型

属性	说明	默认
borderRadius	边界圆角程度，如果是正方形布局，该属性为一半宽或高时，则为圆形	0
borderWidth	边界宽度，外边界	必设值，否则无边框效果
borderColor	边框颜色	black

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%)

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

事件

success

返回生成 base64 图片的本地 url,设置 src

  methods: {
    success(src) {
      // 设置img的src
      this.src = src
    }
  }

fail

返回失败信息

 fail(err) {
      console.log('fail', err)
    }