vue移动端，使用canvas生成商品海报及自定义海报

最新推荐文章于 2024-05-29 11:58:35 发布

原创最新推荐文章于 2024-05-29 11:58:35 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue #canvas

vue 专栏收录该内容

54 篇文章

订阅专栏

本文介绍如何使用vue-canvas-poster组件创建自定义海报。通过示例代码详细展示了配置海报内容，包括文本、图片、二维码及自定义样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用 vue-canvas-poster

npm i vue-canvas-poster --save

2.在main.js入口文件中引入

import VueCanvasPoster from 'vue-canvas-poster'
Vue.use(VueCanvasPoster)

3.html代码

<template>
  <div class>
    <vue-canvas-poster :widthPixels="0" :painting="painting" @success="success" 
     @fail="fail"></vue-canvas-poster>
    <img :src="img" />
  </div>
</template>

4.js代码

export default {
  props: {},
  data() {
    return {
      painting: {
        width: `${document.documentElement.clientWidth}px`,
        height: `${document.documentElement.clientWidth * 1.777}px`,
        background: "#f4f5f7",
        views: [
          {
            type: "image", //海报背景
            url: require("@/assets/images/goods_poster.png"),
            css: {
              width: "auto",
              height: `${document.documentElement.clientWidth * 1.777}px`,
              top: "0",
              left: "0",
              mode: "aspectFill",
            },
          },
          {
            type: "image", //商品图
            url: require("@/assets/images/shopimgs.png"),
            css: {
              width: `90%`,
              height: `400px`,
              top: "80px",
              left: `5%`,
              borderRadius: "10px",
            },
          },
          {
            type: "image", //海报头像
            url: require("@/assets/images/head.png"),
            css: {
              width: `${document.documentElement.clientWidth / 7.5}px`,
              height: `${document.documentElement.clientWidth / 7.5}px`,
              top: `20px`,
              left: `20px`,
            },
          },
          {
            type: "qrcode",
            content:
              "云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。",
            css: {
              top: `560px`,
              right: `20px`,
              color: "#000",
              width: `${document.documentElement.clientWidth / 4.1}px`,
              height: `${document.documentElement.clientWidth / 4.1}px`,
            },
          },
          {
            type: "text",
            text: "你爸爸",
            css: [
              {
                top: `24px`,
                left: `80px`,
                color: "rgba(52,52,52,1)",
                fontSize: "15px",
              },
            ],
          },
          {
            type: "text",
            text: "推荐一个好礼物给你",
            css: [
              {
                top: `50px`,
                left: `80px`,
                color: "rgba(52,52,52,1)",
                fontSize: "15px",
              },
            ],
          },
          {
            type: "text",
            text: "欧莱雅女士小蓝瓶，让你变得更美",
            css: [
              {
                top: `490px`,
                left: `20px`,
                color: "black",
                fontSize: "15px",
              },
            ],
          },
          {
            type: "text",
            text: "￥ 4830",
            css: [
              {
                top: `550px`,
                left: `20px`,
                color: "red",
                fontSize: "18px",
                fontWeight: "bold",
              },
            ],
          },
          {
            type: "text",
            text: "￥7980.00",
            css: [
              {
                top: `553px`,
                left: `100px`,
                color: "#333",
                fontSize: "14px",
                textDecoration: "line-through",
              },
            ],
          },
        ],
      },
      img: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    success(src) {
      this.img = src;
    },
    fail(err) {
      console.log("fail", err);
    },
  },
};

5.预览图

6.自定义配置 type属性支持"text"文本，"image"图片，"qrcode"二维码，"rect"矩形

数组中的css对象中是根据position来定位支持

api 文档如下

type	内容	说明	类型
text	text	文本内容	string 例如：text: "小明",
image	url	图片地址（支持本地图片和网络图片）	string 例如：url: require（"@/assets/images/XX.png"） "https://static/12324/XXX.png"
qrcode	content	二维码内容文本或者链接	string 例如：content: "云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。",
rect	无	矩形支持css（以下见附表）	string 例如：div

附表css对象（6.1） image

属性名称	说明	defaults
width	图片宽度	auto
height	图片高度	auto
mode	图片剪裁缩放	aspectFill （ scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。）

（6.2）text

属性名称	说明	defaults
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

rotate	旋转，按照顺时针旋转的度数	不旋转
width、height	view 的宽度和高度，其中 image 和 text 可不设置	无
top、right、bottom、left	如 css 中为 absolute 布局时的作用，可为负值	默认 top 和 left 为 0
borderRadius	边界圆角程度，如果是正方形布局，该属性为一半宽或高时，则为圆形	0
borderWidth	边界宽度，外边界	必设值，否则无边框效果
borderColor	边框颜色	black
shadow	盒子阴影例如： shadow: 'h-shadow v-shadow blur color'; h-shadow: 必需。水平阴影的位置。允许负值。 v-shadow: 必需。垂直阴影的位置。允许负值 blur: 必需。模糊的距离 color: 必需。阴影的颜色。	shadow 可以同时修饰 image、rect、text、qrcode 等。在修饰 text 时则相当于 text-shadow；修饰 image 和 rect 时相当于 box-shadow；修饰 qrcode 时，则相当于二维码有效区域的投影。
linear-gradient	线性渐变例如：linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%)	无你可以在画布的 background 属性或者 rect 的 color 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 view 中点，半径为最长边，目前不支持自己设置。
radial-gradient	径向渐变例如：radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)	无你可以在画布的 background 属性或者 rect 的 color 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 view 中点，半径为最长边，目前不支持自己设置。

(6.3) rect (同样支持text)

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