@cfx-kit/wallet-avatar - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5-beta-NjMxNDMzMTEy

index.d.ts

@@ -7,2 +7,4 @@ import MersenneTwister from 'mersenne-twister';
     generateAvatarURL(address: string): string;
+    private canvasRender;
+    generateAvatarPNG(address: string, quality?: number): string;
     generateAvatarHTML(address: string): string;
@@ -22,2 +24,3 @@ genShape(remainingColors: Array<string>, i: number, total: number): import("./html").HTMLTemplate;
 export declare function generateAvatarHTML(address: string): string;
+export declare function generateAvatarPNG(address: string, quality?: number): string;
 export default generateAvatarSVG;

index.js

@@ -82,2 +82,40 @@ import MersenneTwister from 'mersenne-twister';
     }
+    canvasRender(address, size) {
+        const diameter = size;
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.height = canvas.width = size;
+        this.mt.init_seed(addressToNumber(address));
+        const remainingColors = this.hueShift(colors.slice());
+        const bgColor = this.genColor(remainingColors);
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, diameter, diameter);
+        for (let i = 0; i < shapeCount - 1; i++) {
+            const total = shapeCount - 1;
+            const firstRot = this.mt.random();
+            const angle = Math.PI * 2 * firstRot;
+            const velocity = (diameter * this.mt.random()) / total + (diameter * i) / total;
+            const tx = Math.cos(angle) * velocity;
+            const ty = Math.sin(angle) * velocity;
+            const secondRot = this.mt.random();
+            const rot = firstRot * 360 + secondRot * 180;
+            const fill = this.genColor(remainingColors);
+            const p = new Path2D();
+            p.rect(0, 0, diameter, diameter);
+            ctx.fillStyle = fill;
+            const { x, y } = new DOMMatrix()
+                .translate(0, 0)
+                .rotate(rot)
+                .transformPoint({ x: -diameter / 2, y: -diameter / 2 });
+            ctx.translate(x + diameter / 2 + tx, y + diameter / 2 + ty);
+            ctx.rotate((rot * Math.PI) / 180);
+            ctx.fill(p);
+            ctx.resetTransform();
+        }
+        return canvas;
+    }
+    generateAvatarPNG(address, quality = 2) {
+        const size = (quality > 1 ? Math.min(10, quality) : 1) * 100;
+        return this.canvasRender(address, size).toDataURL('image/png', 1);
+    }
     generateAvatarHTML(address) {
@@ -174,3 +212,7 @@ this.mt.init_seed(addressToNumber(address));
 }
+export function generateAvatarPNG(address, quality) {
+    const wag = new WalletAvatarGenerate(new MersenneTwister());
+    return wag.generateAvatarPNG(address, quality);
+}
 export default generateAvatarSVG;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@cfx-kit/wallet-avatar",
-  "version": "0.0.4",
+  "version": "0.0.5-beta-NjMxNDMzMTEy",
   "main": "wallet-avatar.bundle.js",
@@ -5,0 +5,0 @@ "module": "index.js",

wallet-avatar.bundle.js

@@ -136,2 +136,40 @@ (function (global, factory) {
         }
+        canvasRender(address, size) {
+            const diameter = size;
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            canvas.height = canvas.width = size;
+            this.mt.init_seed(addressToNumber(address));
+            const remainingColors = this.hueShift(colors.slice());
+            const bgColor = this.genColor(remainingColors);
+            ctx.fillStyle = bgColor;
+            ctx.fillRect(0, 0, diameter, diameter);
+            for (let i = 0; i < shapeCount - 1; i++) {
+                const total = shapeCount - 1;
+                const firstRot = this.mt.random();
+                const angle = Math.PI * 2 * firstRot;
+                const velocity = (diameter * this.mt.random()) / total + (diameter * i) / total;
+                const tx = Math.cos(angle) * velocity;
+                const ty = Math.sin(angle) * velocity;
+                const secondRot = this.mt.random();
+                const rot = firstRot * 360 + secondRot * 180;
+                const fill = this.genColor(remainingColors);
+                const p = new Path2D();
+                p.rect(0, 0, diameter, diameter);
+                ctx.fillStyle = fill;
+                const { x, y } = new DOMMatrix()
+                    .translate(0, 0)
+                    .rotate(rot)
+                    .transformPoint({ x: -diameter / 2, y: -diameter / 2 });
+                ctx.translate(x + diameter / 2 + tx, y + diameter / 2 + ty);
+                ctx.rotate((rot * Math.PI) / 180);
+                ctx.fill(p);
+                ctx.resetTransform();
+            }
+            return canvas;
+        }
+        generateAvatarPNG(address, quality = 2) {
+            const size = (quality > 1 ? Math.min(10, quality) : 1) * 100;
+            return this.canvasRender(address, size).toDataURL('image/png', 1);
+        }
         generateAvatarHTML(address) {
@@ -228,2 +266,6 @@ this.mt.init_seed(addressToNumber(address));
     }
+    function generateAvatarPNG(address, quality) {
+        const wag = new WalletAvatarGenerate(new MersenneTwister__default["default"]());
+        return wag.generateAvatarPNG(address, quality);
+    }
 
@@ -233,2 +275,3 @@ exports.WalletAvatarGenerate = WalletAvatarGenerate;
     exports.generateAvatarHTML = generateAvatarHTML;
+    exports.generateAvatarPNG = generateAvatarPNG;
     exports.generateAvatarSVG = generateAvatarSVG;
@@ -235,0 +278,0 @@ exports.generateAvatarURL = generateAvatarURL;

No alert changes

Improved metrics

Total package byte prevSize

44837

increased by23.57%

Lines of code

566

increased by18.41%

No dependency changes