canvas的scales（-1,1）在ios上无法实现左右翻转的解决方法

缺乏、安全感 2021-09-17 21:12 125阅读 0赞

canvas的scales（-1,1）无法实现左右翻转,在真机Android和开发工具上都是没问题的，在真机ios上没反应。原因是因为：

###  在ios端中scale 里不能传负数，传了-1也会当成1 ###

官方至今也未给出相关的支持方式。

**该怎么办呢，下面推荐一个在微信开放平台中一位大佬提供的方式：**

[https://developers.weixin.qq.com/s/dp1VOKmY7b3m][https_developers.weixin.qq.com_s_dp1VOKmY7b3m]

可直接点击该链接打开微信开发者工具。下面也给大家贴出代码（建议点击上方链接打开，下方代码需要自行准备一张图片）

.js
    
    
    Page({
        data: {
    
        },
        onLoad: function() {
            this.canvas = wx.createCanvasContext("canvas", this)
            wx.getImageInfo({
                src: '/gsl.png',
                success: res => {
                    this.setData({
                        height: res.height,
                        width: res.width
                    }, () => {
                        this.canvas.drawImage("/gsl.png")
                        this.canvas.draw(false, () => {
                            wx.canvasGetImageData({
                                canvasId: 'canvas',
                                x: 0,
                                y: 0,
                                width: this.data.width,
                                height: this.data.height,
                                success: res => {
                                    console.log(res)
                                    let data = res.data
                                    let length = data.length
                                    let width = 4 * res.width
                                    let pos = 0
                                    let array = []
                                    let result = []
                                    let test = 0
                                    let colorArray = []
                                    for (let index = 0; index < length; index++) {
                                        colorArray.push(data[index])
                                        if (colorArray.length == 4) {
                                            array.push(colorArray.concat())
                                            colorArray = []
                                        }
                                        pos++
                                        if (pos >= width) {
                                            pos = 0
                                            let temp = []
                                            array.reverse().forEach(item => {
                                                temp = temp.concat(item)
                                            })
                                            result = result.concat(temp)
                                            array = []
                                        }
                                    }
    
                                    let output = new Uint8ClampedArray(result)
    
                                    wx.canvasPutImageData({
                                        canvasId: 'canvasOut',
                                        data: output,
                                        x: 0,
                                        y: 0,
                                        width: this.data.width,
                                        height: this.data.height,
                                    })
                                }
                            })
                        })
                    })
                }
            })
        },
    })

.wxml
    
    <canvas canvas-id="canvas" style="width:{
       {width}}px;height:{
       {height}}px"></canvas>
    <canvas canvas-id="canvasOut" style="width:{
       {width}}px;height:{
       {height}}px"></canvas>

# 最后，感慨一句，技术真的是伟大的！ #

[https_developers.weixin.qq.com_s_dp1VOKmY7b3m]: https://developers.weixin.qq.com/s/dp1VOKmY7b3m