JavaScript实现点击图片翻转效果

/**     * 图片旋转     * @param direction 旋转的方向     */    rotate (direction) {      const img = new Image()      // 这里的思维就是，把图片映射到一个画板上，然后对图片进行重新绘制，所以这里要建一个canvas对象来充当我们的画板      const canvas = document.createElement('canvas')      // base64转换image对象      img.src = this.uploadImage      // 这里记得一定要在base64转换成图片对象后再进行其它操作，笔者在这里踩了个坑，onload方法就是图片加载再进行其它操作，如果图片是文件路径方式跨域调用效果更加明显      img.onload = () => {        // img的高度和宽度不能在img元素隐藏后获取，否则会出错        const height = img.height        const width = img.width        // 旋转角度以弧度值为参数        const ctx = canvas.getContext('2d')        if (direction === 'right') {          canvas.width = height          canvas.height = width          ctx.rotate(90 * Math.PI / 180)          ctx.drawImage(img, 0, 0, width, -height)        } else {          canvas.width = height          canvas.height = width          ctx.rotate(-90 * Math.PI / 180)          ctx.drawImage(img, 0, 0, -width, height)        }        // 旋转后的图片重新转为base64        this.uploadImage = this.getBase64Image(img, canvas)      }    },    /**    * 把image文件转为base64    */    getBase64Image (img, canvas) {      const ctx = canvas.getContext('2d')      ctx.drawImage(img, 0, 0, img.width, img.height)      const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()      return canvas.toDataURL('image/' + ext)    }