更新记录

1.0.4（2021-08-30） 下载此版本

重复生成，二维码make报错

1.0.3（2021-07-31） 下载此版本

修改父组件给子组件传值

项目介绍

canvas绘制海报、二维码并分享，可以预览保存并分享海报。 海报下方二维码旁边标题比较长，做了自动换行处理。

github 地址 https://github.com/style203/placard

安装方式

插件在 HBuilderX 3.1.22 开发，只需将本组件导入项目或者下载示例项目。

基本用法

<template>
    <view>
        <view class="button">
            <button :disabled="canvasImages == '' ? false : true" type="primary" @click="createsShareImage">生成海报</button>
            <button :disabled="canvasImages != '' ? false : true" @click="previewHandle">预览海报</button>
            <!-- #ifdef MP-WEIXIN -->
                <button type="warn" :disabled="canvasImages != '' ? false : true" open-type="share">分享给朋友</button>
            <!-- #endif -->
        </view>
        <shareImages ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :shareTitle="shareTitle" :goodsTitle="goodsTitle" :shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl" @success="shareSuccess"></shareImages>
    </view>
</template>

import shareImages from '../../components/hj-placard/shareImages.vue'
export default {
    components:{
        shareImages
    },
    data() {
        return {
            canvasImages:'',
            canvasWidth:375,    // 宽度
            canvasHeight:500,   // 高度
            shareTitle:'我是这张图片的标题',     // 分享标题
            goodsTitle:'我是这张图片的标题我是这张图片的标题我是这张图片的标',        // 商品宣传标题
            shareImage:'../../static/bg.jpg',   // 背景图片
            qrSize: 100,    // 二维码大小
            qrUrl: 'https://ext.dcloud.net.cn/plugin?id=5747',  // 生成二维码的链接
        }
    },
    methods: {
        // 生成分享图片
        createsShareImage(){
            // console.log(this.$refs.canvas)
            this.$refs.canvas.canvasCreate();
        },
        // 预览图片
        previewHandle(){
            uni.previewImage({
                urls: [this.canvasImages],
            });
        },
        // 回调图片地址
        shareSuccess(e){
            // console.log('地址',e)
            this.canvasImages = e
        },
        // 分享
        onShareAppMessage(res) {
            // if (res.from === 'button') {
            //  console.log(res.target)
            // }
            return {
                title: 'canvas图片分享',
                path: this.canvasImages
            }
        }
    }
}

1.0.2（2021-07-29） 下载此版本

项目介绍

canvas绘制海报、二维码并分享，可以预览保存并分享海报。 海报下方二维码旁边标题比较长，做了自动换行处理。

github 地址 https://github.com/style203/placard

安装方式

插件在 HBuilderX 3.1.22 开发，只需将本组件导入项目或者下载示例项目。

基本用法

<template>
    <view>
        <view class="button">
            <button :disabled="canvasImages == '' ? false : true" type="primary" @click="createsShareImage">生成海报</button>
            <button :disabled="canvasImages != '' ? false : true" @click="previewHandle">预览海报</button>
            <button type="warn" :disabled="canvasImages != '' ? false : true" open-type="share">分享给朋友</button>
        </view>
        <shareImages ref="canvas" @success="shareSuccess"></shareImages>
    </view>
</template>

import shareImages from '../../components/hj-placard/shareImages.vue'
export default {
    components:{
        shareImages
    },
    data() {
        return {
            canvasImages:'',
        }
    },
    methods: {
        // 生成分享图片
        createsShareImage(){
            // console.log(this.$refs.canvas)
            this.$refs.canvas.canvasCreate();
        },
        // 预览图片
        previewHandle(){
            uni.previewImage({
                urls: [this.canvasImages],
            });
        },
        // 回调图片地址
        shareSuccess(e){
            // console.log('地址',e)
            this.canvasImages = e
        },
        // 分享
        onShareAppMessage(res) {
            // if (res.from === 'button') {
            //  console.log(res.target)
            // }
            return {
                title: 'canvas图片分享',
                path: this.canvasImages
            }
        }
    }
}

平台兼容性

项目介绍

canvas绘制海报、二维码并分享，可以预览保存并分享海报。 海报下方二维码旁边标题比较长，做了自动换行处理。

github 地址 https://github.com/style203/placard

安装方式

插件在 HBuilderX 3.1.22 开发，只需将本组件导入项目或者下载示例项目。

基本用法

<template>
    <view>
        <view class="button">
            <button :disabled="canvasImages == '' ? false : true" type="primary" @click="createsShareImage">生成海报</button>
            <button :disabled="canvasImages != '' ? false : true" @click="previewHandle">预览海报</button>
            <!-- #ifdef MP-WEIXIN -->
                <button type="warn" :disabled="canvasImages != '' ? false : true" open-type="share">分享给朋友</button>
            <!-- #endif -->
        </view>
        <shareImages ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :shareTitle="shareTitle" :goodsTitle="goodsTitle" :shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl" @success="shareSuccess"></shareImages>
    </view>
</template>

import shareImages from '../../components/hj-placard/shareImages.vue'
export default {
    components:{
        shareImages
    },
    data() {
        return {
            canvasImages:'',
            canvasWidth:375,    // 宽度
            canvasHeight:500,   // 高度
            shareTitle:'我是这张图片的标题',     // 分享标题
            goodsTitle:'我是这张图片的标题我是这张图片的标题我是这张图片的标',        // 商品宣传标题
            shareImage:'../../static/bg.jpg',   // 背景图片
            qrSize: 100,    // 二维码大小
            qrUrl: 'https://ext.dcloud.net.cn/plugin?id=5747',  // 生成二维码的链接
        }
    },
    methods: {
        // 生成分享图片
        createsShareImage(){
            // console.log(this.$refs.canvas)
            this.$refs.canvas.canvasCreate();
        },
        // 预览图片
        previewHandle(){
            uni.previewImage({
                urls: [this.canvasImages],
            });
        },
        // 回调图片地址
        shareSuccess(e){
            // console.log('地址',e)
            this.canvasImages = e
        },
        // 分享
        onShareAppMessage(res) {
            // if (res.from === 'button') {
            //  console.log(res.target)
            // }
            return {
                title: 'canvas图片分享',
                path: this.canvasImages
            }
        }
    }
}