美文网首页
关于h5上传图片适配旋转问题

关于h5上传图片适配旋转问题

作者: 小张宝 | 来源:发表于2021-04-26 15:39 被阅读0次
image.onload = function() {
        // 获取图片旋转角度
        var orientation = 1
        EXIF.getData(image, function() {
          orientation = EXIF.getTag(this, 'Orientation')
        })
        // alert('orientation-' + orientation)
        var width = image.width
        var height = image.height
        var scale = Math.max(width / options.maxWidth, height / options.maxHeight)
        //宽度或高度计算
        // if (scale > 1) {
        var w = Math.round(width / scale)
        var h = Math.round(height / scale)
        //生成canvas
        var canvas = document.createElement('canvas')
        var ctx = (window.ctx = canvas.getContext('2d'))
        ctx.save()
        switch (orientation) {
          case 3: //镜头方向朝右 需要顺时针(向左)180度旋转
            console.log('需要顺时针(向左)180度旋转')
            canvas.width = h
            canvas.height = w
            ctx.translate(canvas.width / 2, canvas.height / 2)
            ctx.rotate((180 * Math.PI) / 180)
            ctx.drawImage(this, -w / 2, -h / 2, w, h)
            break
          case 6: //镜头正拍  需要顺时针(向右)90度旋转
            console.log('需要顺时针(向左)90度旋转')
            canvas.width = h
            canvas.height = w
            ctx.translate(canvas.width / 2, canvas.height / 2)
            ctx.rotate((90 * Math.PI) / 180)
            ctx.drawImage(this, -w / 2, -h / 2, w, h)
            break
          case 8: //镜头朝下   需要逆时针(向左)90度旋转"
            console.log('需要逆时针(向右)90度旋转')
            canvas.width = h
            canvas.height = w
            ctx.translate(canvas.width / 2, canvas.height / 2)
            ctx.rotate((-90 * Math.PI) / 180)
            ctx.drawImage(this, -w / 2, -h / 2, w, h)
            break
          default:
            //有的机型无论是什么方向统一返回 0 1  //镜头方向朝左
            canvas.width = w
            canvas.height = h
            ctx.drawImage(this, 0, 0, w, h)
            break
        }
        ctx.restore()
        imageData = canvas.toDataURL('image/jpeg', 0.8)
        // }
        callback && callback(imageData, 0)
      }

相关文章

网友评论

      本文标题:关于h5上传图片适配旋转问题

      本文链接:https://www.haomeiwen.com/subject/sbjerltx.html