Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InvalidStateError: The object is in an invalid state. #8

Open
007sair opened this issue Aug 3, 2018 · 0 comments
Open

InvalidStateError: The object is in an invalid state. #8

007sair opened this issue Aug 3, 2018 · 0 comments

Comments

@007sair
Copy link

007sair commented Aug 3, 2018

你好,我在使用插件的过程中遇到一个问题。如下:

环境
iPhone8 ios v11.3
微信浏览器 v6.7.1

问题描述

// 会报错:
InvalidStateError: The object is in an invalid state. /js/index.js:21:202609 drawImage@[native code]
onload@http:xxxx

伪代码如下

import 'canvasResize.js'

// 微信上传
fileUpload() {
    let me = this
    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], 
        sourceType: ['album', 'camera'], 
        success: function (res) {
            wx.getLocalImgData({
                localId: res.localIds[0],
                success: function (res) {
                    let localData = res.localData;
                    localData = localData.replace('jgp', 'jpeg');
                    
                    let _file = file.dataURL2blob(localData)

                    canvasResize(_file, {
                        width: 1000,
                        crop: false, // 是否裁剪
                        quality: 0.9, // 压缩质量  0 - 1
                        rotate: 0, // 旋转角度 
                        callback(_base64) {
                            me.user_temp_pic = _base64
                        }
                    })

                }
            })
        }
    })
},

debug后发现是

var size = (orientation >= 5 && orientation <= 8) ? methods.newsize(img.height, img.width, $this.options.width, $this.options.height, $this.options.crop)  : methods.newsize(img.width, img.height, $this.options.width, $this.options.height, $this.options.crop);

这个size对象的width和height为空,导致canvas的INVALID_STATE_ERR错误。

由于业务需要,我必须修改原图,将宽度大于1000的图片压缩至1000,而高度随原图比例被计算出来,所以我做了如下更改:

// 223行,添加如下配置:
resize: false, // 重设图片宽度,高度自动按照比例缩放

// 269行
var ratio = img.width / img.height
if ($this.options.resize && typeof $this.options.resize === 'number') {
    $this.options.width = $this.options.resize
    $this.options.height = $this.options.width / ratio
}

// 然后调用时
canvasResize(_file, {
    resize: 1000, // 新增resize项
    crop: false, // 是否裁剪
    quality: 0.9, // 压缩质量  0 - 1
    rotate: 0, // 旋转角度 
    callback(_base64) {
        me.user_temp_pic = _base64
    }
})

我不是很明白crop项的作用。所以自行增加了一个配置。
如果作者有更好的方法,麻烦解答一下,谢谢~~

@007sair 007sair changed the title nvalidStateError: The object is in an invalid state. InvalidStateError: The object is in an invalid state. Aug 3, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant