npm - @2080code/pic-processer - Versions diffs - 0.0.3 → 0.0.5 - Mend

@2080code/pic-processer 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md +23 -8
package/demo/assets/index-CLsCmOse.js +1 -0
package/demo/assets/index-DhpJJgS0.css +1 -0
package/demo/index.html +14 -0
package/dist/pic-processer.cjs.js +1 -0
package/dist/pic-processer.es.js +1 -0
package/dist/pic-processer.umd.js +1 -0
package/index.d.ts +1 -0
package/index.js +1 -1
package/package.json +55 -48
package/demo/demo.html +0 -156
package/dist/pic-processer.js +0 -88
package/lib/pic-processer.min.js +0 -2
package/lib/pic-processer.min.js.map +0 -1
package/rollup.config.js +0 -37
package/src/pic-processer.ts +0 -122
package/tsconfig.json +0 -18
package/types/types.ts +0 -0

package/README.md CHANGED Viewed

@@ -7,18 +7,22 @@
 ## 介绍
 用来对图片做压缩，把 File 对象转为 dataURL，又或者把 dataURL 转为 File 对象。
+***
 ## 安装
 ```bash
 npm install @2080code/pic-processer
 ```
+***
 ## 使用
 ```javascript
 import PicProcesser from '@2080code/pic-processer'
 ```
 或
 ```html
-<script src="lib/pic-processer.min.js"></script>
+<script src="dist/pic-processer.min.js"></script>
 ```
 例子：
@@ -31,6 +35,8 @@ picProcesser.compress(file, 0.2)
 picProcesser.getDataURL(file)
 ```
+***
 ## 方法
 ### compress
 压缩图片质量、改变图片尺寸，输出 dataURL
@@ -38,37 +44,46 @@ picProcesser.getDataURL(file)
 ```javascript
 picProcesser.compress(file, 0.2, 1000, 'image/png')
 ```
-#### 参数
+##### 参数
 参数|类型|默认值|说明
 ---|---|---|---
 `file` | File | `null` | 图片文件
+`options` | [PicProcesser.CompressOptions](######PicProcesser.CompressOptions) | `{ratio: 0.5, maxWidth: null,mime:'image/jpeg'}` | 压缩选项
+###### PicProcesser.CompressOptions
+参数|类型|默认值|说明
+---|---|---|---
 `ratio` | number | `0.5` | 压缩比例，`0`-`1` 之间的小数
 `maxWidth` | number | `null` | 图片宽度上限，>1的整数，单位px，`0` 或 `null` 表示不限制，输出图片的高度会等比例缩放
 `mime` | string | `image/jpeg` | 输出图片类型
-#### 返回
+##### 返回
 返回值|类型|说明
 ---|---|---
 `Promise<string>` | `Promise<string>` | 压缩后的图片 dataURL 编码
 *注意：因为是借助 canvas 渲染输出，几乎是重绘了图片，所以如果压缩比率（`ratio`）设置得太高，最终文件字节可能会比原图更大*
+***
 ### getDataURL
 File 转 dataURL
 ```javascript
 picProcesser.getDataURL(file)
 ```
-#### 参数
+##### 参数
 参数|类型|默认值|说明
 ---|---|---|---
-`file` | File|Blob | `null` | 图片文件
+`file` | File \| Blob | `null` | 图片文件
-#### 返回
+##### 返回
 返回值|类型|说明
 ---|---|---
 `Promise<FileReader>` | `Promise<FileReader>` | 完整的 FileReader 对象，通过`result`属性获取 base64 编码
+***
 ### dataURLtoFile
 dataURL 转 File 对象
@@ -76,13 +91,13 @@ dataURL 转 File 对象
 picProcesser.dataURLtoFile('export.jpg', dataURL)
 ```
-#### 参数
+##### 参数
 参数|类型|默认值|说明
 ---|---|---|---
 `fileName` | string | `null` | 输出文件名
 `dataURL` | string | `null` | base64编码
-#### 返回
+##### 返回
 返回值|类型|说明
 ---|---|---
 `Promise<File>` | `Promise<File>` | File 对象

package/demo/assets/index-CLsCmOse.js ADDED Viewed

@@ -0,0 +1 @@

package/demo/assets/index-DhpJJgS0.css ADDED Viewed

@@ -0,0 +1 @@

+ :root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{min-width:320px;min-height:100vh;margin:0}#app{max-width:1280px;margin:0 auto;padding:2rem}dl dd[data-v-2a9df8fb]:not(:last-child){margin-bottom:5px}label[data-v-2a9df8fb]{font-weight:700}em[data-v-2a9df8fb]{color:#888;text-decoration:underline}#data-url-text[data-v-2a9df8fb]{resize:vertical;box-sizing:border-box;width:100%;min-height:min-content;padding:6px}

package/demo/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>pic-processer</title>
+    <script type="module" crossorigin src="/assets/index-CLsCmOse.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DhpJJgS0.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/dist/pic-processer.cjs.js ADDED Viewed

@@ -0,0 +1 @@

+ function e(e){return new Promise((t,r)=>{const n=new FileReader;n.addEventListener("load",()=>{t(n?.result)},!1),n.addEventListener("loadend",()=>{t(n?.result)}),n.addEventListener("error",()=>{r(new Error("getDataURL error!"))}),n.addEventListener("abort",()=>{r(new Error("getDataURL abort!"))}),e&&[Blob,File].some(t=>e instanceof t)?n.readAsDataURL(e):r(new Error("Unspecified file!"))})}function t(e,t){const r=t.split(","),n=(r[0]||"").match(/:(.*?);/)?.[1],o=window.atob(r[1]||"");let a=o.length;const i=new Uint8Array(a);for(;a--;)i[a]=o.charCodeAt(a);return new File([i],e,{type:n})}function r(t,r){const{ratio:n,mime:o,maxWidth:a}={ratio:.5,mime:"image/jpeg",maxWidth:null,...r};return new Promise((r,i)=>{let s="";const d=new Image;a&&a<2&&i(new Error("maxWidth must be greater than 1!")),d.addEventListener("loadstart",()=>{}),d.addEventListener("load",()=>{const e=document.createElement("canvas");let t=1;a&&d.width>a&&(t=a/d.width);const i=d.width*t,c=d.height*t;e.width=i,e.height=c,e.getContext("2d").drawImage(d,0,0,i,c),s=e.toDataURL(o,+n),r(s)},!1),d.addEventListener("loadend",()=>{r(s)}),d.addEventListener("error",()=>{i(new Error("compress error!"))}),d.addEventListener("abort",()=>{i(new Error("compress abort!"))}),t&&[Blob,File].some(e=>t instanceof e)?e(t).then(e=>{d.src=e}).catch(e=>{i(e)}):i(new Error("no file!"))})}module.exports=class{constructor(){this.getDataURL=e,this.dataURLtoFile=t,this.compress=r}};

package/dist/pic-processer.es.js ADDED Viewed

@@ -0,0 +1 @@

+ function e(e){return new Promise((t,r)=>{const n=new FileReader;n.addEventListener("load",()=>{t(n?.result)},!1),n.addEventListener("loadend",()=>{t(n?.result)}),n.addEventListener("error",()=>{r(/* @__PURE__ */new Error("getDataURL error!"))}),n.addEventListener("abort",()=>{r(/* @__PURE__ */new Error("getDataURL abort!"))}),e&&[Blob,File].some(t=>e instanceof t)?n.readAsDataURL(e):r(/* @__PURE__ */new Error("Unspecified file!"))})}function t(e,t){const r=t.split(","),n=(r[0]||"").match(/:(.*?);/)?.[1],a=window.atob(r[1]||"");let o=a.length;const i=new Uint8Array(o);for(;o--;)i[o]=a.charCodeAt(o);return new File([i],e,{type:n})}function r(t,r){const{ratio:n,mime:a,maxWidth:o}={ratio:.5,mime:"image/jpeg",maxWidth:null,...r};return new Promise((r,i)=>{let s="";const d=new Image;o&&o<2&&i(/* @__PURE__ */new Error("maxWidth must be greater than 1!")),d.addEventListener("loadstart",()=>{}),d.addEventListener("load",()=>{const e=document.createElement("canvas");let t=1;o&&d.width>o&&(t=o/d.width);const i=d.width*t,c=d.height*t;e.width=i,e.height=c,e.getContext("2d").drawImage(d,0,0,i,c),s=e.toDataURL(a,+n),r(s)},!1),d.addEventListener("loadend",()=>{r(s)}),d.addEventListener("error",()=>{i(/* @__PURE__ */new Error("compress error!"))}),d.addEventListener("abort",()=>{i(/* @__PURE__ */new Error("compress abort!"))}),t&&[Blob,File].some(e=>t instanceof e)?e(t).then(e=>{d.src=e}).catch(e=>{i(e)}):i(/* @__PURE__ */new Error("no file!"))})}var n=class{constructor(){this.getDataURL=e,this.dataURLtoFile=t,this.compress=r}};export{n as default};

package/dist/pic-processer.umd.js ADDED Viewed

@@ -0,0 +1 @@

+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):(e="undefined"!=typeof globalThis?globalThis:e||self).PicProcesser=t()}(this,function(){function e(e){return new Promise((t,r)=>{const n=new FileReader;n.addEventListener("load",()=>{t(n?.result)},!1),n.addEventListener("loadend",()=>{t(n?.result)}),n.addEventListener("error",()=>{r(new Error("getDataURL error!"))}),n.addEventListener("abort",()=>{r(new Error("getDataURL abort!"))}),e&&[Blob,File].some(t=>e instanceof t)?n.readAsDataURL(e):r(new Error("Unspecified file!"))})}function t(e,t){const r=t.split(","),n=(r[0]||"").match(/:(.*?);/)?.[1],o=window.atob(r[1]||"");let a=o.length;const i=new Uint8Array(a);for(;a--;)i[a]=o.charCodeAt(a);return new File([i],e,{type:n})}function r(t,r){const{ratio:n,mime:o,maxWidth:a}={ratio:.5,mime:"image/jpeg",maxWidth:null,...r};return new Promise((r,i)=>{let d="";const s=new Image;a&&a<2&&i(new Error("maxWidth must be greater than 1!")),s.addEventListener("loadstart",()=>{}),s.addEventListener("load",()=>{const e=document.createElement("canvas");let t=1;a&&s.width>a&&(t=a/s.width);const i=s.width*t,c=s.height*t;e.width=i,e.height=c,e.getContext("2d").drawImage(s,0,0,i,c),d=e.toDataURL(o,+n),r(d)},!1),s.addEventListener("loadend",()=>{r(d)}),s.addEventListener("error",()=>{i(new Error("compress error!"))}),s.addEventListener("abort",()=>{i(new Error("compress abort!"))}),t&&[Blob,File].some(e=>t instanceof e)?e(t).then(e=>{s.src=e}).catch(e=>{i(e)}):i(new Error("no file!"))})}return class{constructor(){this.getDataURL=e,this.dataURLtoFile=t,this.compress=r}}});

package/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ declare module '@2080code/pic-processer'

package/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import PicProcesser from './src/pic-processer.ts'
+import PicProcesser from 'dist/pic-processer.es.js'
 export {
     PicProcesser as default

package/package.json CHANGED Viewed

@@ -1,48 +1,55 @@
-{
-  "name": "@2080code/pic-processer",
-  "version": "0.0.3",
-  "description": "图片压缩、改变图片尺寸、File 和 dataURL 互转",
-  "main": "index.js",
-  "types": "./src/types.ts",
-  "type": "module",
-  "node": ">=20.0.0",
-  "scripts": {
-    "dev": "rollup -c -w",
-    "build": "del \"dist\" \"lib\" /s/q/f && rollup -c"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/2080code/pic-processer.git"
-  },
-  "keywords": [
-    "picture",
-    "compress",
-    "base64",
-    "dataURL",
-    "js",
-    "canvas"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "author": "Warren Chen",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/2080code/pic-processer/issues"
-  },
-  "homepage": "https://github.com/2080code/pic-processer#readme",
-  "dependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "tslib": "^2.8.1"
-  },
-  "directories": {
-    "lib": "lib"
-  },
-  "devDependencies": {}
-}
+{
+  "name": "@2080code/pic-processer",
+  "version": "0.0.5",
+  "description": "图片压缩、改变图片尺寸、File 和 dataURL 互转",
+  "type": "module",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "files":[
+    "dist",
+    "demo",
+    "index.js",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "dev": "vite serve",
+    "build": "rmdir /s /q \"dist\" \"demo\" && vue-tsc -b && vite build && vite build --config vite.config.demo.ts",
+    "preview": "vite preview --config vite.config.demo.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/2080code/pic-processer.git"
+  },
+  "keywords": [
+    "picture",
+    "compress",
+    "resize",
+    "dataURL",
+    "data64",
+    "javascript",
+    "canvas"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Warren Chen",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/2080code/pic-processer/issues"
+  },
+  "homepage": "https://github.com/2080code/pic-processer#readme",
+  "dependencies": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

package/demo/demo.html DELETED Viewed

@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>@2080code/pic-processer</title>
-  <style>
-    body{
-        font-size: 12px;
-        word-wrap: break-word;
-        padding: 10px;
-    }
-    #data-url-text{
-        resize: vertical;
-        width: 100%;
-        height: 150px;
-        color: #888;
-        border: 1px solid #888;
-        padding: 5px;
-        box-sizing: border-box;
-        border-radius: 3px;
-    }
-    #compress-preview{
-        display: none
-    }
-    dl dd:not(:last-child){
-        margin-bottom: 5px;
-    }
-    label{
-        font-weight: bold;
-    }
-    em{
-        color: #888;
-        text-decoration: underline;
-    }
-  </style>
-</head>
-<body>
-    <header>
-        <h1>@2080code/pic-processer demo</h1>
-    </header>
-    <article>
-        <dl>
-            <dt>
-                <h2>选取图片</h2>
-            </dt>
-            <dd>
-                <input type="file" id="file" draggable onchange="handle()"/>
-            </dd>
-        </dl>
-        <dl>
-            <dt><h2>getDataURL</h2></dt>
-            <dd>
-            </dd>
-            <dd>
-                原始图片转为 dataURL：
-                <textarea name="" id="data-url-text" readonly></textarea>
-            </dd>
-        </dl>
-        <hr/>
-        <dl>
-            <dt><h2>compress</h2></dt>
-            <dd>
-                <label for="compress-ratio">ratio：</label>
-                <select name="ratio" id="compress-ratio" onchange="handle()">
-                    <option value="1" selected>1（无压缩，输出字节可能会远大于原图）</option>
-                    <option value="0.8">0.8</option>
-                    <option value="0.6">0.6</option>
-                    <option value="0.4">0.4</option>
-                    <option value="0.2">0.2</option>
-                </select>
-            </dd>
-            <dd>
-                <label for="compress-max-width">maxWidth：</label>
-                <input type="number" inputmode="numeric" id="compress-max-width" onchange="handle()"/>px
-            </dd>
-            <dd>
-                <label for="compress-mime">mime：</label>
-                <select name="mime" id="compress-mime" onchange="handle()">
-                    <option value="image/jpeg" selected>image/jpeg</option>
-                    <option value="image/png">image/png</option>
-                </select>
-            </dd>
-            <dd>
-                <div id="compress-result"></div>
-            </dd>
-            <dd>
-                <img id="compress-preview" src="" alt="preview">
-            </dd>
-        </dl>
-        <hr/>
-        <dl>
-            <dt><h2>dataURLtoFile</h2></dt>
-            <dd>
-                通过以上 compress 方法输出的 dataURL 被转为 File 对象后的信息:
-                <div id="file-info"><em>请先在 compress 中选择文件</em></div>
-            </dd>
-        </dl>
-        <hr/>
-    </article>
-    <script src="../lib/pic-processer.min.js"></script>
-    <script>
-        const picProcesser=new PicProcesser()
-        // getDataURL
-        async function getDataURLHandle(){
-        }
-        // compress
-        async function handle(){
-            // about getDataURL
-            const file=document.getElementById('file').files[0]
-            const dataURL=await picProcesser.getDataURL(file)
-            // 在 fileInput元素下方显示dataURL
-            const dataURLText=document.getElementById('data-url-text')
-            dataURLText.value=dataURL
-            dataURLText.scrollTop=0
-            // about compress
-            const compressRatio=document.getElementById('compress-ratio')
-            const compressMaxWidth=document.getElementById('compress-max-width')
-            const compressMime=document.getElementById('compress-mime')
-            const compressedDataURL=await picProcesser.compress(file,+compressRatio.value,+compressMaxWidth.value,compressMime.value)
-            const compressPreview=document.getElementById('compress-preview')
-            console.log('compress',file,compressRatio.value,compressedDataURL.length)
-            compressPreview.src=compressedDataURL
-            compressPreview.style.display='initial'
-            // about dataURLtoFile
-            const exportedFile=await picProcesser.dataURLtoFile(file.name,compressedDataURL)
-            document.getElementById('compress-result').innerHTML=`
-                original file size: <em>${file.size} byte</em>,
-                compressed file size: <em>${exportedFile.size} byte</em>
-            `
-            document.getElementById('file-info').innerHTML=`
-                name: <em>${exportedFile.name}</em><br/>
-                size: <em>${exportedFile.size} byte</em><br/>
-                type: <em>${exportedFile.type}</em>
-            `
-        }
-    </script>
-</body>
-</html>

package/dist/pic-processer.js DELETED Viewed

@@ -1,88 +0,0 @@
-function getDataURL(file) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.addEventListener('load', () => {
-            resolve(reader === null || reader === void 0 ? void 0 : reader.result);
-        }, false);
-        reader.addEventListener('loadend', () => {
-            console.log('loadend', reader);
-            resolve(reader === null || reader === void 0 ? void 0 : reader.result);
-        });
-        reader.addEventListener('error', () => {
-            reject(new Error('getDataURL error!'));
-        });
-        reader.addEventListener('abort', () => {
-            reject(new Error('getDataURL abort!'));
-        });
-        if (file && [Blob, File].some(type => file instanceof type)) {
-            reader.readAsDataURL(file);
-        }
-        else {
-            reject(new Error('Unspecified file!'));
-        }
-    });
-}
-function compress(file, ratio = 0.5, maxWidth = null, mime = 'image/jpeg') {
-    return new Promise((resolve, reject) => {
-        let dataURL = '';
-        const img = new Image();
-        if (maxWidth && maxWidth < 2) {
-            reject(new Error('maxWidth must be greater than 1!'));
-        }
-        img.addEventListener('loadstart', () => {
-        });
-        img.addEventListener('load', () => {
-            const canvas = document.createElement('canvas');
-            let scaleRatio = 1;
-            if (maxWidth && img.width > maxWidth) {
-                scaleRatio = maxWidth / img.width;
-            }
-            const width = img.width * scaleRatio;
-            const height = img.height * scaleRatio;
-            canvas.width = width;
-            canvas.height = height;
-            canvas.getContext('2d').drawImage(img, 0, 0, width, height);
-            dataURL = canvas.toDataURL(mime, +ratio);
-            resolve(dataURL);
-        }, false);
-        img.addEventListener('loadend', () => {
-            resolve(dataURL);
-        });
-        img.addEventListener('error', () => {
-            reject(new Error('compress error!'));
-        });
-        img.addEventListener('abort', () => {
-            reject(new Error('compress abort!'));
-        });
-        if (file && [Blob, File].some(type => file instanceof type)) {
-            this.getDataURL(file).then(res => {
-                img.src = res;
-            }).catch(error => {
-                reject(error);
-            });
-        }
-        else {
-            reject(new Error('no file!'));
-        }
-    });
-}
-function dataURLtoFile(fileName, dataURL) {
-    const arr = dataURL.split(',');
-    const mime = arr[0].match(/:(.*?);/)[1];
-    const bstr = window.atob(arr[1]);
-    let n = bstr.length;
-    const u8arr = new Uint8Array(n);
-    while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-    }
-    return new File([u8arr], fileName, { type: mime });
-}
-class PicProcesser {
-    constructor() {
-        this.compress = compress;
-        this.getDataURL = getDataURL;
-        this.dataURLtoFile = dataURLtoFile;
-    }
-}
-export { PicProcesser as default };

package/lib/pic-processer.min.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e\|\|self).PicProcesser=t()}(this,function(){"use strict";function e(e){return new Promise((t,n)=>{const r=new FileReader;r.addEventListener("load",()=>{t(null==r?void 0:r.result)},!1),r.addEventListener("loadend",()=>{console.log("loadend",r),t(null==r?void 0:r.result)}),r.addEventListener("error",()=>{n(new Error("getDataURL error!"))}),r.addEventListener("abort",()=>{n(new Error("getDataURL abort!"))}),e&&[Blob,File].some(t=>e instanceof t)?r.readAsDataURL(e):n(new Error("Unspecified file!"))})}function t(e,t=.5,n=null,r="image/jpeg"){return new Promise((o,a)=>{let i="";const s=new Image;n&&n<2&&a(new Error("maxWidth must be greater than 1!")),s.addEventListener("loadstart",()=>{}),s.addEventListener("load",()=>{const e=document.createElement("canvas");let a=1;n&&s.width>n&&(a=n/s.width);const d=s.widtha,l=s.heighta;e.width=d,e.height=l,e.getContext("2d").drawImage(s,0,0,d,l),i=e.toDataURL(r,+t),o(i)},!1),s.addEventListener("loadend",()=>{o(i)}),s.addEventListener("error",()=>{a(new Error("compress error!"))}),s.addEventListener("abort",()=>{a(new Error("compress abort!"))}),e&&[Blob,File].some(t=>e instanceof t)?this.getDataURL(e).then(e=>{s.src=e}).catch(e=>{a(e)}):a(new Error("no file!"))})}function n(e,t){const n=t.split(","),r=n[0].match(/:(.*?);/)[1],o=window.atob(n[1]);let a=o.length;const i=new Uint8Array(a);for(;a--;)i[a]=o.charCodeAt(a);return new File([i],e,{type:r})}return class{constructor(){this.compress=t,this.getDataURL=e,this.dataURLtoFile=n}}});
2	- //# sourceMappingURL=pic-processer.min.js.map

package/lib/pic-processer.min.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"pic-processer.min.js","sources":["../src/pic-processer.ts"],"sourcesContent":["/**\r\n * compress for picture\r\n * @author Warren\r\n */\r\n\r\n/**\r\n * 转为dataURL\r\n * @param {File,Blob} file\r\n * @returns {Promise}\r\n */\r\nfunction getDataURL(file:File|Blob):Promise<string> {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n // reader.addEventListener('loadstart', () => {\r\n // })\r\n reader.addEventListener('load', () => {\r\n resolve(reader?.result as string)\r\n }, false);\r\n reader.addEventListener('loadend', () => {\r\n console.log('loadend',reader)\r\n resolve(reader?.result as string)\r\n })\r\n reader.addEventListener('error', () => {\r\n reject(new Error('getDataURL error!'))\r\n })\r\n reader.addEventListener('abort', () => {\r\n reject(new Error('getDataURL abort!'))\r\n })\r\n if (file && [Blob,File].some(type=>file instanceof type)) {\r\n reader.readAsDataURL(file)\r\n } else {\r\n reject(new Error('Unspecified file!'))\r\n }\r\n })\r\n}\r\n\r\n/**\r\n * 压缩\r\n * @param {File,Blob} file\r\n * @param {Number} ratio 压缩比\r\n * @param {Number} maxWidth 尺寸限制，单位像素\r\n * @param {string} mime 输出图片类型，默认`image/jpeg`\r\n * @returns {Promise}\r\n */\r\nfunction compress(file:File|Blob, ratio:number = 0.5, maxWidth:number = null,mime:string='image/jpeg'):Promise<string> {\r\n // console.log(ratio, maxWidth)\r\n // 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染\r\n return new Promise((resolve, reject) => {\r\n let dataURL = '';\r\n const img = new Image();\r\n\r\n // 尺寸限制必须大于1，否则canvas是渲染不出内容的\r\n if(maxWidth && maxWidth<2) {\r\n reject(new Error('maxWidth must be greater than 1!'))\r\n }\r\n\r\n img.addEventListener('loadstart', () => {\r\n })\r\n img.addEventListener('load', () => {\r\n const canvas = document.createElement('canvas'); // 创建canvas元素\r\n let scaleRatio = 1\r\n if (maxWidth && img.width > maxWidth) {\r\n scaleRatio = maxWidth / img.width\r\n }\r\n const width=img.width * scaleRatio\r\n const height=img.height * scaleRatio\r\n // 确保canvas的尺寸和图片一样\r\n canvas.width = width;\r\n canvas.height = height;\r\n canvas.getContext('2d').drawImage(img, 0, 0, width, height); // 将图片绘制到canvas中\r\n dataURL = canvas.toDataURL(mime, +ratio); // 转换图片为dataURL\r\n resolve(dataURL)\r\n }, false);\r\n img.addEventListener('loadend', () => {\r\n resolve(dataURL)\r\n })\r\n img.addEventListener('error', () => {\r\n reject(new Error('compress error!'))\r\n })\r\n img.addEventListener('abort', () => {\r\n reject(new Error('compress abort!'))\r\n })\r\n\r\n if (file && [Blob,File].some(type=>file instanceof type)) {\r\n this.getDataURL(file).then(res => {\r\n img.src = res\r\n }).catch(error => {\r\n reject(error)\r\n })\r\n } else {\r\n reject(new Error('no file!'))\r\n }\r\n\r\n \r\n })\r\n}\r\n\r\n/**\r\n * dataURL 转 File\r\n * @param {String} fileName 文件名\r\n * @param {String} dataURL\r\n * @returns {File}\r\n */\r\nfunction dataURLtoFile(fileName:string, dataURL:string):File {\r\n const arr = dataURL.split(',');\r\n const mime = arr[0].match(/:(.*?);/)[1];\r\n const bstr = window.atob(arr[1]);\r\n let n = bstr.length;\r\n const u8arr = new Uint8Array(n);\r\n while (n--) {\r\n u8arr[n] = bstr.charCodeAt(n);\r\n }\r\n return new File([u8arr], fileName, { type: mime });\r\n}\r\n\r\nexport default class PicProcesser {\r\n constructor() {\r\n }\r\n compress=compress\r\n getDataURL=getDataURL\r\n dataURLtoFile=dataURLtoFile\r\n}\r\n"],"names":["getDataURL","file","Promise","resolve","reject","reader","FileReader","addEventListener","result","console","log","Error","Blob","File","some","type","readAsDataURL","compress","ratio","maxWidth","mime","dataURL","img","Image","canvas","document","createElement","scaleRatio","width","height","getContext","drawImage","toDataURL","this","then","res","src","catch","error","dataURLtoFile","fileName","arr","split","match","bstr","window","atob","n","length","u8arr","Uint8Array","charCodeAt","constructor"],"mappings":"4OAUA,SAASA,EAAWC,GAChB,OAAO,IAAIC,QAAQ,CAACC,EAASC,KACzB,MAAMC,EAAS,IAAIC,WAGnBD,EAAOE,iBAAiB,OAAQ,KAC5BJ,EAAQE,eAAAA,EAAQG,UACjB,GACHH,EAAOE,iBAAiB,UAAW,KAC/BE,QAAQC,IAAI,UAAUL,GACtBF,EAAQE,eAAAA,EAAQG,UAEpBH,EAAOE,iBAAiB,QAAS,KAC7BH,EAAO,IAAIO,MAAM,wBAErBN,EAAOE,iBAAiB,QAAS,KAC7BH,EAAO,IAAIO,MAAM,wBAEjBV,GAAQ,CAACW,KAAKC,MAAMC,KAAKC,GAAMd,aAAgBc,GAC/CV,EAAOW,cAAcf,GAErBG,EAAO,IAAIO,MAAM,uBAG7B,CAUA,SAASM,EAAShB,EAAgBiB,EAAe,GAAKC,EAAkB,KAAKC,EAAY,cAGrF,OAAO,IAAIlB,QAAQ,CAACC,EAASC,KACzB,IAAIiB,EAAU,GACd,MAAMC,EAAM,IAAIC,MAGbJ,GAAYA,EAAS,GACpBf,EAAO,IAAIO,MAAM,qCAGrBW,EAAIf,iBAAiB,YAAa,QAElCe,EAAIf,iBAAiB,OAAQ,KACzB,MAAMiB,EAASC,SAASC,cAAc,UACtC,IAAIC,EAAa,EACbR,GAAYG,EAAIM,MAAQT,IACxBQ,EAAaR,EAAWG,EAAIM,OAEhC,MAAMA,EAAMN,EAAIM,MAAQD,EAClBE,EAAOP,EAAIO,OAASF,EAE1BH,EAAOI,MAAQA,EACfJ,EAAOK,OAASA,EAChBL,EAAOM,WAAW,MAAMC,UAAUT,EAAK,EAAG,EAAGM,EAAOC,GACpDR,EAAUG,EAAOQ,UAAUZ,GAAOF,GAClCf,EAAQkB,KACT,GACHC,EAAIf,iBAAiB,UAAW,KAC5BJ,EAAQkB,KAEZC,EAAIf,iBAAiB,QAAS,KAC1BH,EAAO,IAAIO,MAAM,sBAErBW,EAAIf,iBAAiB,QAAS,KAC1BH,EAAO,IAAIO,MAAM,sBAGjBV,GAAQ,CAACW,KAAKC,MAAMC,KAAKC,GAAMd,aAAgBc,GAC/CkB,KAAKjC,WAAWC,GAAMiC,KAAKC,IACvBb,EAAIc,IAAMD,IACXE,MAAMC,IACLlC,EAAOkC,KAGXlC,EAAO,IAAIO,MAAM,cAK7B,CAQA,SAAS4B,EAAcC,EAAiBnB,GACtC,MAAMoB,EAAMpB,EAAQqB,MAAM,KACpBtB,EAAOqB,EAAI,GAAGE,MAAM,WAAW,GAC/BC,EAAOC,OAAOC,KAAKL,EAAI,IAC7B,IAAIM,EAAIH,EAAKI,OACb,MAAMC,EAAQ,IAAIC,WAAWH,GAC7B,KAAOA,KACLE,EAAMF,GAAKH,EAAKO,WAAWJ,GAE7B,OAAO,IAAIlC,KAAK,CAACoC,GAAQT,EAAU,CAAEzB,KAAMK,GAC7C,QAEc,MACZ,WAAAgC,GAEAnB,KAAAhB,SAASA,EACTgB,KAAAjC,WAAWA,EACXiC,KAAAM,cAAcA,CAHd"}

package/rollup.config.js DELETED Viewed

@@ -1,37 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
-import babel from '@rollup/plugin-babel'
-import terser from '@rollup/plugin-terser'
-import typescript from '@rollup/plugin-typescript'
-export default {
-  input: 'index.js',
-  output: [{
-    file: 'dist/pic-processer.js',
-    name: 'PicProcesser',
-  },{
-    file: 'lib/pic-processer.min.js',
-    format: 'umd',
-    name: 'PicProcesser',
-    sourcemap: true,
-    plugins: [terser()]
-  }],
-  plugins: [
-    commonjs(),
-    resolve(),
-    typescript(),
-    babel({
-      babelHelpers: 'bundled',
-    //   presets: [
-    //     ['@babel/preset-env', {
-    //       // 配置项
-    //       targets: {
-    //         chrome: '58',
-    //         ie: '11'
-    //       }
-    //     }]
-    //   ]
-    }),
-  ]
-}

package/src/pic-processer.ts DELETED Viewed

@@ -1,122 +0,0 @@
-/**
- * compress for picture
- * @author Warren
- */
-/**
- * 转为dataURL
- * @param {File,Blob} file
- * @returns {Promise}
- */
-function getDataURL(file:File|Blob):Promise<string> {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        // reader.addEventListener('loadstart', () => {
-        // })
-        reader.addEventListener('load', () => {
-            resolve(reader?.result as string)
-        }, false);
-        reader.addEventListener('loadend', () => {
-            console.log('loadend',reader)
-            resolve(reader?.result as string)
-        })
-        reader.addEventListener('error', () => {
-            reject(new Error('getDataURL error!'))
-        })
-        reader.addEventListener('abort', () => {
-            reject(new Error('getDataURL abort!'))
-        })
-        if (file && [Blob,File].some(type=>file instanceof type)) {
-            reader.readAsDataURL(file)
-        } else {
-            reject(new Error('Unspecified file!'))
-        }
-    })
-}
-/**
- * 压缩
- * @param {File,Blob} file
- * @param {Number} ratio 压缩比
- * @param {Number} maxWidth 尺寸限制，单位像素
- * @param {string} mime 输出图片类型，默认`image/jpeg`
- * @returns {Promise}
- */
-function compress(file:File|Blob, ratio:number = 0.5, maxWidth:number = null,mime:string='image/jpeg'):Promise<string> {
-    // console.log(ratio, maxWidth)
-    // 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
-    return new Promise((resolve, reject) => {
-        let dataURL = '';
-        const img = new Image();
-        // 尺寸限制必须大于1，否则canvas是渲染不出内容的
-        if(maxWidth && maxWidth<2) {
-            reject(new Error('maxWidth must be greater than 1!'))
-        }
-        img.addEventListener('loadstart', () => {
-        })
-        img.addEventListener('load', () => {
-            const canvas = document.createElement('canvas'); // 创建canvas元素
-            let scaleRatio = 1
-            if (maxWidth && img.width > maxWidth) {
-                scaleRatio = maxWidth / img.width
-            }
-            const width=img.width * scaleRatio
-            const height=img.height * scaleRatio
-            // 确保canvas的尺寸和图片一样
-            canvas.width = width;
-            canvas.height = height;
-            canvas.getContext('2d').drawImage(img, 0, 0, width, height); // 将图片绘制到canvas中
-            dataURL = canvas.toDataURL(mime, +ratio); // 转换图片为dataURL
-            resolve(dataURL)
-        }, false);
-        img.addEventListener('loadend', () => {
-            resolve(dataURL)
-        })
-        img.addEventListener('error', () => {
-            reject(new Error('compress error!'))
-        })
-        img.addEventListener('abort', () => {
-            reject(new Error('compress abort!'))
-        })
-        if (file && [Blob,File].some(type=>file instanceof type)) {
-            this.getDataURL(file).then(res => {
-                img.src = res
-            }).catch(error => {
-                reject(error)
-            })
-        } else {
-            reject(new Error('no file!'))
-        }
-    })
-}
-/**
- * dataURL 转 File
- * @param {String} fileName 文件名
- * @param {String} dataURL
- * @returns {File}
- */
-function dataURLtoFile(fileName:string, dataURL:string):File {
-  const arr = dataURL.split(',');
-  const mime = arr[0].match(/:(.*?);/)[1];
-  const bstr = window.atob(arr[1]);
-  let n = bstr.length;
-  const u8arr = new Uint8Array(n);
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-  return new File([u8arr], fileName, { type: mime });
-}
-export default class PicProcesser {
-  constructor() {
-  }
-  compress=compress
-  getDataURL=getDataURL
-  dataURLtoFile=dataURLtoFile
-}

package/tsconfig.json DELETED Viewed

@@ -1,18 +0,0 @@
-{
-    "include": [
-        "./src/**/*",
-        "rollup.config.js",
-        "types/types.ts"
-    ],
-    "compilerOptions": {
-        "target": "es2015",
-        "module": "es2015",
-        "lib": [
-            "es2015",
-            "dom"
-        ],
-        "removeComments": true,
-        "allowUmdGlobalAccess": true
-    }
-}

package/types/types.ts DELETED Viewed

File without changes