H5端 水印相机，可压缩

利用html2canvas进行添加水印

添加水印方法有很多，选择html2canvas的原因是，水印跟写html一样，可使用less/scss/css编写样式

😏在app端依然可以使用html2canvas，但是必须在renderjs中写

    一. 先写好水印和无水印照片的div,将此div移到屏幕外(position:a....;left:100vw;不让看见)
    <view ref="pic">
        <img :src="picUrl" @onLoad="loadPic"></img> //用image会模糊，他的原理是背景图片
        <view>
            水印内容
        </view>
    </view>
    二. 利用uni.chooseImage拍一张照片，赋值给PicUrl
        然后在loadPic事件中(图片加载完成事件)进行添加水印
        loadPic(){
            let that = this
            this.$nextTick(() => {
                setTimeout(() => {
                    let dom = that.$refs.pic.$el; //获取无水印照片和水印内容的div
                    html2canvas(dom, {
                        width: dom.clientWidth,
                        height: dom.clientHeight,
                        scrollX: 0,
                        scrollY: 0,
                        useCORS: true,
                        backgroundColor: 'transparent', //解决白边,或者在css里，写成：水印view宽高让里面的照片撑开
                    }).then((canvas) => {
                        let a = canvas.toDataURL('image/png',0.1) //0.1是压缩图片质量，0-1
                        console.log("添加水印后的照片",a)
                    })
                }, 100)
            })
        }