Canvas eraser function

 canvas Eraser function

  Don't talk much , Go straight to the code

<template>
    <view>
        <view class="wrapper">
            <view class="handCenter">
                <canvas class="handWriting" style="height:300px" :disable-scroll="true" @touchstart="uploadScaleStart"
                    @touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
            </view>
            <view class="colorwarp">
                <image @click="selectColorEvent('black','#1A1A1A')"
                    :src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
                    :class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
                <image @click="selectColorEvent('red','#ca262a')"
                    :src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
                    :class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
                    
            </view>
            <view class="">
                 Set the eraser size 
            </view>
            <view class="">
                <slider  value="5" @change="sliderChange" min="1" max="10" show-value />
            </view>
            <view class="warp">
                <view class="" @click="retDraw">
                     rewrite 
                </view>
                <view class="" @click="saveCanvasAsImg">
                     preservation 
                </view>
                <view class="" @click="previewCanvasImg">
                     preview 
                </view>
                <view class="" @click="subCanvas">
                     complete 
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                canvasName: 'handWriting',
                ctx: '',
                startX: null,
                startY: null,
                canvasWidth: 0,
                canvasHeight: 0,
                selectColor: 'black',
                lineColor: '#1A1A1A', //  Color 
                lineSize: 5, //  Note multiple 
                bgColor:'#fff',
            //    bgImg:'../../static/ceshi.png',
                bgImg:'http://maomao.judianseo.com/ceshi.png'
            };
        },
        onLoad() {
            this.ctx = uni.createCanvasContext("handWriting");
            this.$nextTick(() => {
                uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
                        this.canvasWidth = rect.width;
                        this.canvasHeight = rect.height;
                        /*  take canvas The background is set to   white background , Not set up    Derived canvas The background is transparent  */
                    })
                    .exec();
            });
        },
        mounted(){
            this.ctxcanvas();
        },
        methods: {
            // Choose size eraser 
            sliderChange(e) {
                console.log('value  change ：' + e.detail.value)
                this.lineSize = e.detail.value
            },
            ctxcanvas(){
                const context = this.ctx;
                const query = uni.createSelectorQuery().in(this);
                query.select('.handCenter').boundingClientRect(data => {
                    // console.log(" Get layout location information " + JSON.stringify(data));
                    context.setFillStyle(this.bgColor);
                    context.fillRect(0, 0, data.width, data.height); //TODO context The width and height of are to be determined 
                    context.fill();
                    let img = 'http://maomao.judianseo.com/ceshi.png'
                    console.log(img)
                    context.drawImage(img, 0, 0, data.width, data.height);
                    context.draw();
                }).exec();
            },
            //  The handwriting begins 
            uploadScaleStart(e) {
                this.startX = e.changedTouches[0].x
                this.startY = e.changedTouches[0].y
                // Set brush parameters 
                // Brush color 
                this.ctx.setStrokeStyle(this.lineColor)
                // Set the line thickness 
                this.ctx.setLineWidth(this.lineSize)
                // Set the end style of the line 
                this.ctx.setLineCap("round") //'butt'、'round'、'square'
                // Start brush 
                this.ctx.beginPath()
            },
            //  Handwriting movement 
            uploadScaleMove(e) {
                // Take some 
                let temX = e.changedTouches[0].x
                let temY = e.changedTouches[0].y
                // Draw lines 
                this.ctx.moveTo(this.startX, this.startY)
                this.ctx.lineTo(temX, temY)
                this.ctx.stroke()
                this.startX = temX
                this.startY = temY
                this.ctx.draw(true)
            },
            /**
             *  rewrite 
             */
            retDraw() {
                this.ctx.clearRect(0, 0, 700, 730);
                this.ctx.draw();
                // Set up canvas background 
                this.ctxcanvas();
            //    this.setCanvasBg('#fff');
            },
            /**
             * @param {Object} str
             * @param {Object} color
             *  Choose a color 
             */
            selectColorEvent(str, color) {
                this.selectColor = str;
                this.lineColor = color;
            },
            // complete 
            subCanvas() {
                uni.canvasToTempFilePath({
                    canvasId: 'handWriting',
                    fileType: 'png',
                    quality: 1, // Picture quality 
                    success(res) {
                        // console.log(res.tempFilePath, 'canvas Generate image address ');
                        uni.showToast({
                            title: ' To save '
                        });
                        // Save to system album 
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success(res) {
                                uni.showToast({
                                    title: ' Successfully saved to album ',
                                    duration: 2000
                                });
                            }
                        });
                    }
                });
            },
            // Save to album 
            saveCanvasAsImg() {
                uni.canvasToTempFilePath({
                    canvasId: 'handWriting',
                    fileType: 'png',
                    quality: 1, // Picture quality 
                    success(res) {
                        console.log(res.tempFilePath, 'canvas Generate image address ');
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success(res) {
                                uni.showToast({
                                    title: ' Saved to album ',
                                    duration: 2000
                                });
                            }
                        });
                    }
                });
            },
            // preview 
            previewCanvasImg() {
                uni.canvasToTempFilePath({
                    canvasId: 'handWriting',
                    fileType: 'jpg',
                    quality: 1, // Picture quality 
                    success(res) {
                        uni.previewImage({
                            urls: [res.tempFilePath] // The preview image   Array 
                        });
                    }
                });
            },
            // Set up canvas Background color    Not set up    Derived canvas The background is transparent 
            //@params： character string   color
            setCanvasBg(color) {

                /*  take canvas The background is set to   white background , Not set up    Derived canvas The background is transparent  */
                //rect()  Parameter description    Abscissa of the upper left corner of the rectangular path , The ordinate of the upper left corner ,  The width of the rectangular path ,  The height of the rectangular path 
                // Here is  canvasHeight - 4  Because the bottom covers the border , So write down manually 
                this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight);
                this.ctx.drawImage(this.bgImg, 0, 0, this.canvasWidth, this.canvasHeight)
                // ctx.setFillStyle('red')
                this.ctx.setFillStyle(color);
                this.ctx.fill(); // Set the fill 
                this.ctx.draw(); // Draw a picture 
            }
        }
    };
</script>

<style lang="scss" scoped>
    page {
        background: #fbfbfb;
        height: auto;
        overflow: hidden;
    }

    .wrapper {
        width: 100%;
        height: 95vh;
    /*     margin: 30rpx 0;
        overflow: hidden;
        display: flex;
        align-content: center;
        flex-direction: row;
        justify-content: center; */
        font-size: 28rpx;
    }

    .handWriting {
        background: #fff;
        width: 100%;
        height: 95vh;
    }

    .handRight {
        display: inline-flex;
        align-items: center;
    }

    .handCenter {
        border: 4rpx dashed #e9e9e9;
        flex: 5;
        overflow: hidden;
        box-sizing: border-box;
    }

    .handTitle {
        transform: rotate(90deg);
        flex: 1;
        color: #666;
    }

    .handBtn button {
        font-size: 28rpx;
    }

    .handBtn {
        width: 100%;
        height: 95vh;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex: 1;
    }

    .delBtn {
        position: absolute;
        top: 250rpx;
        left: 0rpx;
        transform: rotate(90deg);
        color: #666;
    }
    .subBtn {
        display: inline-flex;
        transform: rotate(90deg);
        background: #008ef6;
        color: #fff;
        margin-bottom: 30rpx;
        text-align: center;
        justify-content: center;
    }

    /*Peach -  newly added  -  preservation */

    .saveBtn {
        transform: rotate(90deg);
        color: #666;
    }

    .previewBtn {
        transform: rotate(90deg);
        color: #666;
    }

    .uploadBtn {
        transform: rotate(90deg);
        color: #666;
    }

    /*Peach -  newly added  -  preservation */

    .black-select {
        top: 30rpx;
        left: 25rpx;
    }

    .black-select.color_select {
        width: 60rpx;
        height: 60rpx;
    }

    .red-select {
        width: 60rpx;
        height: 60rpx;
    }

    .red-select.color_select {
        width: 60rpx;
        height: 60rpx;
    }
    .colorwarp{
        width: 100%;
        height: 150rpx;
        display: flex;
        align-items: flex-start;
        image{
            width: 60rpx;
            height: 60rpx;
        }
    }
    .warp{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        view{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20%;
            height: 80rpx;
            background-color: #008ef6;
            color: #fff;
        }
    }
</style>

Conclusion

         There are still some inferior places, you can correct , Feel free to leave a comment .