Skip to content

Latest commit

 

History

History
116 lines (80 loc) · 4.08 KB

工作问题记录.md

File metadata and controls

116 lines (80 loc) · 4.08 KB
Raw

问题总结

图片剪裁VUE插件

  • ie9 h5 file 返回的对象e.target.files[0]会报无法获取未定义或null引用的属性“0”

    解决：const file = e.target.files ? e.target.files[0] : e.target.value;

    判断是否有files对象，没有用value值，但是这样就只支持单文件上传

  • ie9 下没有FileReader对象

    解决：用iframe嵌套表单的方式解决

  • ie9、10没有formdata对象，不能用blob对象提交服务端处理

    解决：直接获取base64上传服务端

  • ie9使用跨域的图片链接时，不能把图片信息从canvas转化成base64，出于ie9安全性问题

    解决：先将图片传入服务端，返回图片的base64，前端直接使用base64图片处理即可

  • vue中jsx的render函数里的style赋值，如果要设置成动态的，可以采用计算属性返回一个计算方法xxx，然后在render中用{this.xxx}达到效果

    例子：

    //render内部
<img
   src={this.cropImg}
   style={this.boxStyle}
   alt="Cropped Image"
/>

//增加计算属性boxStyle
computed: {
   boxStyle () {
      return 'width: ' + this.boxWidth + 'px; height: ' + this.boxHeight + 'px; border: 1px solid gray'
   }
},

  • 当图片transform scale缩放时，真实移动的偏移量要除以scale才能计算出真实值

  • ie9、10 滚轮事件用的是mousewheel,滚轮上下移动 用的是event.wheelDelta，在chrome、ie11+ 滚轮事件用的是wheel，滚轮上下移动用的是event.deltaY

  • canvas要处理跨域的图片需要image对象添加crossOrigin='anonymous'，否则会报安全错误无法解析图片

  • 在ie10中如果直接对base64的img取长宽属性是为0的，可以通过new Image实例，把当前的src，赋值给实例的src，调用onload方法，获取到长宽

  • ie9 transform要加上vendor ，如ie要用msTransform，并且ie9不支持3d，只支持2d处理，所以对应的translate3d要修改成translateX和tanslateY

处理第一个图片剪裁工具组件，最终我采用的方案：

  • 原计划：ie9、10上传用base64上传，chrome、ie11用formdata

    修改为：全部用base64上传剪裁完的图片（使用这个前提是服务端要有方法可以实现直接将base64转换成图片二进制的方法，并返回）

  • 原计划：ie9用iframe形式上传服务端图片，加载预览图片，ie10+、chrome用FileReader直接调用readAsDataURL(file)

    修改为：都用iframe服务端返回base64预览（使用这个前提是服务端要提供方法可以将上传到服务端的二进制图片转换成base64返回到前端）

  • 原计划：使用Cropperjs作为原型方法，vue调用接口实现

    修改为：自己开发类似cropperjs的方法替代

node 删除文件夹

用nodejs删除文件夹，根目录一直报错

node删除文件,嵌套多级文件夹报错

代码如下：

var rmdirSync = (function () {
    function iterator (url,dirs) {
        var stat = fs.statSync(url)
        if (stat.isDirectory()) {
            dirs.unshift(url)//收集目录
            inner(url,dirs);
        } else if (stat.isFile()) {
            fs.unlinkSync(url)//直接删除文件
        }
    }
    function inner (path,dirs) {
        var arr = fs.readdirSync(path)
        for (var i = 0, el ; el = arr[i++];) {
            iterator(resolve.join(path, el),dirs)
        }
    }
    return function (dir,cb) {
        cb = cb || function () {}
        var dirs = [];
 
        try {
            iterator(dir,dirs)
            console.log(dirs)
            for(var i = 0, el ; el = dirs[i++];){
                fs.rmdirSync(el)//一次性删除所有收集到的目录
            }
            cb()
        } catch (e) {//如果文件或目录本来就不存在，fs.statSync会报错，不过我们还是当成没有异常发生
            e.code === "ENOENT" ? cb() : cb(e)
        }
    }
})()

rmdirSync(resolve(__dirname, `../src/wiki/pages/${routeName}`), function (e) {
	console.log('!!!' + e)
	console.log(`删除${routeName}目录以及子目录成功`)
})