更新记录

2.0.3（2025-03-12）

优化

2.0.2（2025-03-04）

uni_modules组件优化

2.0.1（2025-02-26）

优化

平台兼容性

mosowe-canvas-image：一个可以制作多用途图片的插件（海报，二维码，分享图）

平台支持：

插件功能

1. 支持多图片绘制，多文本绘制，圆形图片绘制；
2. 支持矩形（线条）绘制；
3. 支持圆形绘制；
4. 支持二维码生成，项目用不上可以去插件内去除，毕竟这个插件携带的比较大，单纯用来生成二维码图片也是阔以的；
5. 支持绘图后预览。

多用于海报图，分享图；

注意 H5 跨域问题及小程序白名单配置；

属性

lists\属性

注意：图文先后顺序，底层的图片靠前，最上层的在最后，圆形图片放在最后，因为一旦绘制圆形，后续的元素都只在该圆形内显示，而超过圆形范围的将看不见。

slots

事件

使用方式

若page.json中配置了"easycom": true，则无需script引入就可以使用，没有则需要引入。

1. 无 slot：组件标签添加ref属性，采用父级调用子组件createCanvas()方法使用，见后文示例；
2. 有 slot：slot 区点击就会执行

示例

<template>
  <view class="">
    <button
      type="warn"
      @click="_createImage('png')">
      生成图片.png
    </button>
    <button
      type="primary"
      @click="_createImage('jpg')">
      生成图片.jpg
    </button>
    处理时间：{{ dealTime }}

    <button
      type="primary"
      @click="chooseImage">
      本地图片选择
    </button>
  </view>

  <!-- canvas绘图 -->
  <mosowe-canvas-image
    ref="mosoweCanvasImageRef"
    :lists="poster1"
    :height="canvasHeight"
    :width="canvasWidth"
    :imgType="imgType"
    showLoading
    showPreview
    @canvasImage="_canvasImage"></mosowe-canvas-image>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MosoweCanvasListItem } from '@/components/mosowe-canvas-image/typing.d';

const image =
  'https://**************.png';
const canvasWidth = 750;
const canvasHeight = 1330;
const imgType = ref('png');

const poster1 = ref<MosoweCanvasListItem[]>([
  // 图片
  {
    type: 'text',
    content: '基础图片',
    x: 20,
    y: 30,
    color: '#ff0000'
  },
  {
    type: 'image',
    content: image,
    x: 10,
    y: 50,
    width: 100,
    height: 200
  },
  {
    type: 'text',
    content: '圆形图片',
    x: 150,
    y: 30,
    color: '#ff0000'
  },
  {
    type: 'image',
    content: image,
    x: 140,
    y: 50,
    width: 100,
    height: 100,
    arcR: 50,
    arcX: 0,
    arcY: 0
  },
  {
    type: 'text',
    content: '圆角矩形图片',
    x: 270,
    y: 30,
    color: '#ff0000'
  },
  {
    type: 'image',
    content: image,
    x: 260,
    y: 50,
    width: 120,
    height: 120,
    imageShapeType: 'width',
    arcR: 20
  },
  {
    type: 'text',
    content: '椭圆图片',
    x: 410,
    y: 30,
    color: '#ff0000'
  },
  {
    type: 'image',
    content: image,
    color: '#000000',
    x: 410,
    y: 50,
    width: 200,
    height: 100,
    ellipse: true
  },
  // 矩形
  {
    type: 'text',
    content: '矩形',
    x: 20,
    y: 280,
    color: 'green'
  },
  {
    type: 'shape',
    color: '#ff0000',
    x: 20,
    y: 300,
    width: 100,
    height: 100
  },
  {
    type: 'text',
    content: '圆角矩形+边框',
    x: 150,
    y: 280,
    color: 'green'
  },
  {
    type: 'shape',
    color: '#ff0000',
    x: 150,
    y: 300,
    width: 100,
    height: 100,
    arcR: 20,
    strokeColor: '#000000',
    lineWidth: 5
  },
  {
    type: 'text',
    content: '渐变',
    x: 300,
    y: 280,
    color: 'green'
  },
  {
    type: 'shape',
    color: '#ff0000',
    x: 300,
    y: 300,
    width: 100,
    height: 100,
    gradient: [
      [0, 'red'],
      [1, 'purple']
    ]
  },
  {
    type: 'text',
    content: '长方形',
    x: 420,
    y: 280,
    color: 'green'
  },
  {
    type: 'shape',
    color: '#ff0000',
    x: 420,
    y: 300,
    width: 200,
    height: 100
  },
  // 圆形
  {
    type: 'text',
    content: '圆形',
    x: 20,
    y: 450
  },
  {
    type: 'shape',
    color: 'green',
    x: 20,
    y: 470,
    width: 100,
    height: 100,
    arcR: 50
  },
  {
    type: 'text',
    content: '圆形+边框',
    x: 150,
    y: 450
  },
  {
    type: 'shape',
    color: 'green',
    x: 150,
    y: 470,
    width: 100,
    height: 100,
    arcR: 50,
    strokeColor: '#000000',
    lineWidth: 5
  },
  {
    type: 'text',
    content: '渐变',
    x: 300,
    y: 450
  },
  {
    type: 'shape',
    color: 'green',
    x: 300,
    y: 470,
    width: 100,
    height: 100,
    arcR: 50,
    strokeColor: '#000000',
    lineWidth: 5,
    gradientType: 'circular',
    gradient: [
      [0, 'red'],
      [1, 'purple']
    ]
  },
  {
    type: 'text',
    content: '椭圆',
    x: 420,
    y: 450
  },
  {
    type: 'shape',
    color: 'green',
    x: 420,
    y: 470,
    width: 200,
    height: 100,
    ellipse: true,
    strokeColor: '#000000',
    lineWidth: 5
  },
  // 二维码
  {
    type: 'text',
    content: '二维码',
    x: 20,
    y: 600,
    color: 'blue'
  },
  {
    type: 'qr',
    content:
      'https://blog.csdn.net/skyblacktoday/article/details/131551057?spm=1001.2014.3001.5501',
    x: 20,
    y: 630,
    width: 200,
    height: 200
  },
  {
    type: 'text',
    content: '二维码+中心图',
    x: 250,
    y: 600,
    color: 'blue'
  },
  {
    type: 'qr',
    content:
      'https://blog.csdn.net/skyblacktoday/article/details/131551057?spm=1001.2014.3001.5501',
    x: 280,
    y: 630,
    width: 200,
    height: 200
  },
  {
    type: 'image',
    content: image,
    x: 360,
    y: 710,
    width: 40,
    height: 40,
    arcR: 10
  },
  // 文本
  {
    type: 'text',
    content: '文本加粗',
    x: 20,
    y: 900,
    color: '#E6A23C',
    font: 'normal bold 50px 微软雅黑'
  },
  {
    type: 'text',
    content: '数字特殊字体',
    x: 20,
    y: 980,
    color: '#E6A23C',
    size: 50
  },
  {
    type: 'text',
    content: '1234567890',
    x: 20,
    y: 1050,
    color: '#E6A23C',
    font: 'normal bold 50px din-number'
  }
]);

const mosoweCanvasImageRef = ref<any>(null);
const imageData = ref('');
let createTime = 0;
let endTime = 0;
const dealTime = ref(0);

// 选择照片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      poster1.value[3].content = res.tempFilePaths[0];
    }
  });
};

// 创建图片
const _createImage = (type: 'png' | 'jpg') => {
  imgType.value = type;
  setTimeout(() => {
    createTime = Date.now();
    mosoweCanvasImageRef.value.createCanvas();
  }, 300);
};
// 获取图片
const _canvasImage = (image: string) => {
  endTime = Date.now();
  dealTime.value = (endTime - createTime) / 1000;
  imageData.value = image;
};
</script>

slot 插槽触发：

<mosowe-canvas-image
    :lists="poster1"
    :height="canvasHeight"
    :width="canvasWidth"
    :imgType="imgType"
    showLoading
    showPreview
    @canvasImage="_canvasImage">
  <view class="in_btn">slot按钮的</view>
</mosowe-canvas-image>

v2.0.0

1. 组件新增showLoading，qrSize，qrTypeNumber属性
2. 新增typing.d.ts文件，ts 使用引入定义MosoweCanvasListItem[]自动提示
3. 小程序端二维码不显示问题处理
4. 原 lists属性：新增元素strokeColor边框颜色，lineWidth边框宽度，font文本属性
5. 原list属性：type值的rect矩形（线条），arc圆 删除，改为shape图形
6. 原list属性：去掉arc属性
7. 组件处理优化：网络图片首次渲染下载，后续取缓存。
8. 支持：矩形，长方形，圆角矩形，圆形，椭圆及相关图片裁剪绘制
9. 支持：渐变颜色填充，横向渐变，中心渐变

v1.2.0：

1. 添加透明度globalAlpha,值 0-1；
2. 修改只能画一个圆形图片问题，画圆形图片时耗时较多，因为额外增加了一个 canvas 处理圆形图片，请注意arcX与arcY的说明；

v1.1.0：

1. 添加本地图片渲染，已支持本地相册/相机 + https 的网络图片，建议画布宽高：750*1330
2. 添加导出图片的类型：imgType，可选值，jpg、png
3. 添加本地图片压缩功能：compress是否开启压缩,compressSize：压缩程度，默认 2M，lists 列表图片项需增加传参file，
4. 解决 H5 网络图片“canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported”错误问题，图片服务器需支持“Access-Control-Allow-Origin: *”
5. 使用非 solt 插槽触发事件时，请确认$ref是否正确
6. 示例增加参数编辑，使用前体验插件