capricorncd / image-process-tools Goto Github PK

Image clipping / scaling, support local / same domain video file screenshot function (HTML5 + canvas). 图片裁剪/等比缩放，支持本地/同域视频文件截图功能 (html5 + canvas)

Home Page: https://capricorncd.github.io/image-process-tools/dist/

License: MIT License

JavaScript 20.09% HTML 1.64% Shell 0.80% TypeScript 53.89% Vue 23.17% SCSS 0.41%

html5-canvas image-clip image-clipper

image-process-tools's Introduction

Hi there 👋

I'm Capricorncd, I'm a Web Engineer, and I've been working in web development since 2016. I'm from China.

⚡ Technologies

These are some of the technologies and tools that I work with:

image-process-tools's People

Contributors

Stargazers

Watchers

Forkers

lisiyizu bobhfut stonegithubs itwangcode jerexyz imperfectworld fashionwill smartui chuanxiaojin imshowhey lijiayi01 starm328 starwangx helentim anycodes gtxzsxxk cjs1992 wujiuhsu wwwk

image-process-tools's Issues

未做选择文件类型判断，未处理img.onerror

        isImage: function (file) {
            // 视频类型
            var imageType = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'];
            // 文件后缀
            var suf = App.getSuffix(file);

            if (imageType.join(',').indexOf(suf) > -1) {
                return true;
            }
            return false;
        }

同时实例化两个新对象，通过Date.parse()获取的毫秒重复

// input[type="file"] id
var inputTempId = 'IPTS_' + Date.parse(new Date());

改为：(new Date).getTime();

反复缩放图片后，导致img width不固定

image-process-tools/src/js/manual-crop/crop-class.js

Line 505 in 340ab90

iw = ih * imgWidth / imgHeight

SSR support

这边把这个嵌入React组件中使用了，有打算支持一下ssr吗，目前看来document 和 window对象有直接暴露的情况。

vue项目, vite打包报错

报错信息如下
`$ vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts
node_modules/date-utils-2020/src/index.ts:91:5 - error TS2322: Type 'T & Date' is not assignable to type 'null'.

91 result = input
~~~~~~

node_modules/date-utils-2020/src/index.ts:97:5 - error TS2322: Type 'Date' is not assignable to type 'null'.

97 result = new Date(input)
~~~~~~

node_modules/date-utils-2020/src/index.ts:107:9 - error TS2322: Type 'Date' is not assignable to type 'null'.

107 result = new Date([str.substring(0, 4), str.substring(4, 6), str.substring(6, 8)].join('/'))
~~~~~~

node_modules/date-utils-2020/src/index.ts:111:9 - error TS2322: Type 'Date' is not assignable to type 'null'.

111 result = new Date([str.substring(0, 4), str.substring(4, 6), '01'].join('/'))
~~~~~~

node_modules/date-utils-2020/src/index.ts:115:9 - error TS2322: Type 'Date' is not assignable to type 'null'.

115 result = new Date(str + '/01/01')
~~~~~~

node_modules/date-utils-2020/src/index.ts:120:9 - error TS2322: Type 'Date' is not assignable to type 'null'.

120 result = new Date(parseInt(input))
~~~~~~

node_modules/date-utils-2020/src/index.ts:136:9 - error TS2322: Type 'Date' is not assignable to type 'null'.

136 result = new Date([RegExp.$1, RegExp.$2, RegExp.$3].join('/'))
~~~~~~

node_modules/date-utils-2020/src/index.ts:140:9 - error TS2322: Type 'Date' is not assignable to type 'null'.

140 result = new Date([RegExp.$1, RegExp.$2, '01'].join('/'))
~~~~~~

node_modules/date-utils-2020/src/index.ts:142:9 - error TS2322: Type 'Date' is not assignable to type 'null'.

142 result = new Date(str)
~~~~~~

node_modules/date-utils-2020/src/index.ts:146:34 - error TS2339: Property 'getFullYear' does not exist on type 'never'.

146 return result && !isNaN(result.getFullYear()) ? result : null
~~~~~~~~~~~

node_modules/zx-sml/libs/utils/src/dom.ts:69:22 - error TS2488: Type 'NodeListOf' must have a 'Symbol.iterator' method that returns an iterator.

69 el.append(...temp.childNodes)
~~~~~~~~~~~~~~~

Found 11 errors in 2 files.

Errors Files
10 node_modules/date-utils-2020/src/index.ts:91
1 node_modules/zx-sml/libs/utils/src/dom.ts:69
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`