小程序Canvas图片自适应、文字自适应、canvas图片导出不模糊

短命女 2021-09-10 07:46 1357阅读 0赞

自适应图片大小、位置  
自定义文字大小、位置  
自适应核心：**获取屏幕像素，用该像素转换成和设计稿对等的rem，每次设置大小或者位置的时候，都用需要设置的值乘以该rem就能达到自适应效果**  
下面有代码，代码下面有效果图

export default {
        data() {
            return{
                windowWidth: 0,
                windowHeight: 0,
                ratio: 0,
                canvasWidht: 0,
                canvasHeight: 0,
                resData: {
                    img: '',
                    logo: ''
                }
            }
        },
        methods: {
            imgCengten (url, maxWidht, top, Round) {
                // 头像居中
                // maxWidht: canvas宽度
                // top: 高度
                // Round: 头像大小
                let that = this
                this.ctx.save();
                this.ctx.beginPath();
                this.ctx.arc(maxWidht / 2, top, Round, 0, 2 * Math.PI);
                this.ctx.closePath();
                this.ctx.clip();
                this.ctx.drawImage(url, maxWidht / 2 - Round, top - Round, Round * 2, Round * 2);
                this.ctx.restore();
                that.ctx.draw(true)
            },
            // 把网络图片下载到本地
            downloadfileFn (url, Callback) {
                // url：网络图片
                // Callback：回调
                uni.getImageInfo({
                    src: url,
                    success (res) {
                        Callback(res.path)
                    }
                })
            },
            // 初始化、把px转换成rem
            Reset (Callback) {
                var that = this;
                // 获取Canvas。    坑：如果是用自定义组件的话，是在自定义组件里面的话，需要在后面加多一个this参数！！！！！！！！！
                that.ctx = uni.createCanvasContext('myCanvas', that);
                const ctx = that.ctx
                // 坑：如果是用自定义组件的话，是在自定义组件里面的话，需要在后面加多一个this参数！！！！！！！！！
                const query = uni.createSelectorQuery().in(this);
                // 获取canvas宽度
                query.select('.canvas').boundingClientRect(function(data) {
                    that.canvasWidht = data.width
                    that.canvasHeight = data.height
                    uni.getSystemInfo({
                        success: function (res) {
                            that.windowWidth = res.windowWidth
                            that.windowHeight = res.windowHeight
                            // 用手机屏幕除以375。至于为什么除以375，因为我的设计图是根据375这个宽度设计的。
                            // （重要）这步非常重要，所有的自适应都会用到这个参数
                            // 只要用你需要定位的值，或者大小乘以这个参数，就能达到与rem一样的效果
                            that.ratio = that.windowWidth / 375
                            // 初始化成功，进行回调
                            Callback()
                        }
                    })
                }).exec()
            }
        },
        mounted (options) {
            let that = this
            // 初始化
            that.Reset(function () {
                // 这里提供一种思路。
                // 如果请求多张网络图片的时候，可以把请求图片放在初始之后进行统一请求
                // 由于多张，把控不了请求的快慢所以，可以定义一个object，然后把他们放进去
                // 用watch深度监控该对象，每次成功请求一张图片都监控，然后判断对象里面的图片参数 === ''，如果全部都不为空，就证明全部都请求完毕了，进行绘画
                let img = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572004417595&di=7b72a4a18bdb3bd7f3a68daf4813e483&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201811%2F17%2F20181117112448_RPkiQ.thumb.700_0.jpeg'
                that.downloadfileFn(img, function (url) {
                    that.resData.img = url
                })
                let logo = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572005120044&di=3d0caa0abdf47f1184a2c011f0ff4b53&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F18%2F20170918154609_MZz3U.jpeg'
                that.downloadfileFn(logo, function (url) {
                    that.resData.logo = url
                })
            })
        },
        watch: {
            resData: {
                handler (newName) {
                    let that = this
                    if (newName.img !== '' && newName.logo !== '') {
                        that.imgCengten(newName.img, that.canvasWidht, 295 * that.ratio, 30 * that.ratio)
                        let txt = '一段自适应大小以及定位的文字'
                        // 坑：设置文字的时候，如果也要做自适应大小的话，会导致有小数点，所以toFixed(0)把小数点去掉，不然自适应会失效
                        that.ctx.font = `normal 400 ${(18 * that.ratio).toFixed(0)}px PingFangSC-Semibold`
                        that.ctx.fillText(txt, 20 * that.ratio, 435 * that.ratio)
                        // 把所有东西都渲染完毕之后，最坑的地方来了，draw是一个异步函数！
                        // 也就是说，有可能在图片没渲染完或者在一些低配机型下面会导致渲染的东西丢失。
                        // 但是微信官方提供了一种解决方法，他有2个参数，第二个参数是回调！
                        // 但！！如果不加延时的话，回调就失效了。原因：迷。
                        that.ctx.draw(true, setTimeout(function(){
                            // 延时完毕执行回调之后，把canvas图片导出来。
                            // 重要：如果是自定义组件，需要导出图片也要加this的。
                            uni.canvasToTempFilePath({
                                x: 0,
                                y: 0,
                                // 由于初始化的时候就已经获取宽高了直接填就好了
                                width: that.windowWidth,
                                height: that.windowHeight,
                                // destWidth、destHeight是导出图片的大小
                                // 如果直接填的话，会导致导出来的图片变得模糊！！
                                // 解决：用获取的宽高乘以设备的像素比在乘以2（乘以2要不要其实好像都没什么区别= =）
                                destWidth: that.windowWidth * uni.getSystemInfoSync().pixelRatio * 2,
                                destHeight: that.windowHeight * uni.getSystemInfoSync().pixelRatio * 2,
                                canvasId: 'myCanvas',
                                fileType: 'jpg',
                                success: function (res) {
                                    // 最终这就是导出的图像了
                                    console.log(res.tempFilePath);
                                },
                                fail: (res) => {
                                    console.log(res);
                                }
                            }, that)
                        }, 300))
                    }
                },
                deep:true
            }
        }
    }

![18749935-ad2e6cd42f30b5b0.png][]

6p.png

![18749935-2b17a0aca39165d6.png][]

i5.png

![18749935-7aa4eea8d67311c4.png][]

i6.png

![18749935-b61ddc99afe47dca.png][]

x.png

![18749935-806cd3c1f70714e6.png][]

xr.png

[18749935-ad2e6cd42f30b5b0.png]: /images/20210825/425330f3ee804b138e6033f9a38c501b.png
[18749935-2b17a0aca39165d6.png]: /images/20210825/8806190be1e34a67928752ad9cbee12e.png
[18749935-7aa4eea8d67311c4.png]: /images/20210825/294388d4d17e4bfea047af29d8ac02ec.png
[18749935-b61ddc99afe47dca.png]: /images/20210825/07830195e588469faa169b93cdd056c4.png
[18749935-806cd3c1f70714e6.png]: /images/20210825/40e235b1dbc64e9199232672a282805a.png