更新记录

0.1.4（2023-12-21）

1、新增横屏模式 2、新增背景图不能擦除模式

0.1.3（2023-12-15）

修复撤回功能不能正常撤回的bug

0.1.2（2023-12-12）

取消保存按钮，下载按钮 保存图片的类型 1、保存地址 2、保存到本地图片 3、既保存地址 又保存图片

平台兼容性

wn-canvas 万能画板

简介

powered by Xiaogang @2023

万能画板，支持H5和小程序，支持保存图片，支持自定义背景图片，支持自定义画笔颜色，支持自定义画笔粗细，支持自定义画笔橡皮擦，支持自定义画笔撤销，支持自定义画笔清空，支持自定义画笔保存，支持自定义画笔下载，支持自定义画笔下载失败回调

效果图

API

属性(Props)!

事件(Events)

快速使用

基础示例，具体说明参考上面API

<template>
    <view class="content">
        <wnCanvas saveImageType="3" @saveImage="saveImage" :drawImage="drawImage" :isUnderBkg="true" @dowmloadErr='dowmloadErr' @dowmloadSuc="dowmloadSuc"></wnCanvas>
    </view>
</template>
<script>
    import wnCanvas from "@/uni_modules/xiaogang-canvas/components/wn-canvas.vue"
    export default {
        components: {
            wnCanvas
        },
        data() {
            return {
                drawImage:require("../../static/head.jpg")//绘制背景图片 不传则为白色背景
            }
        },
        methods: {
            saveImage(url) {
                //画板返回的图片地址
                console.log(url);
            },
            dowmloadErr(err){
                //下载图片失败时的回调
                console.log(err);
            },
            dowmloadSuc(res){
                //下载图片成功时的回调
                console.log(res);
            }
        }
    }
</script>

如有问题或建议，欢迎留言或关注公众号「小刚科技站」联系沟通哟