Minecraft Skin Viewer

Built for the MinecraftCapes website.

Demo - https://minecraft-cape-creator.pages.dev

Example

Creating an instance

import MinecraftCapeCreator from 'minecraft-cape-creator'

this.minecraftCapeCreator: new MinecraftCapeCreator()

Building a cape

You'll want to build a new cape after making any changes. The value returned is a base64 of the image. This can be displayed however you choose.

this.minecraftCapeCreator.buildCape().then(value => {
    console.log(value);
})

Change Texture

Provide a texture to show on the cape and elytra. The aspect ration will be squeezed to 1.6:1 so it's best to use a cropper tool like CropperJS.

changeImage() {
    this.minecraftCapeCreator.setImage(image /* url | base64 | local */)
    this.buildCape();
}

Change Background Texture

Should there be a background cape/elytra? Note: This must follow the cape/elytra templates

showOnElytra(value) {
    this.minecraftCapeCreator.setBackground(value /* url | base64 | local */)
    this.buildCape();
}

Change Elytra Texture

Should the image be on the elytra?

showOnElytra(value) {
    this.minecraftCapeCreator.showOnElytra(value /* value */)
    this.buildCape();
}

Change Cape/Elytra Color

You can either set a hex value #FF0000 or use setAutoColor which will calculate the colour based on the image.

changeColour() {
    this.minecraftCapeCreator.setAutoColor()
    this.minecraftCapeCreator.setColor(this.color)
    this.buildCape()
}

Change scale

This will change the resolution of the cape. Min 1, Max 6. 1 = 64x32, 6 = 2048x1024. Obviously a larger scale will mean a clearer image.

changeScale() {
    this.minecraftCapeCreator.setScale(this.scale)
    this.buildCape()
}

Download Cape

Pretty self expanitory

downloadCape() {
    this.minecraftCapeCreator.downloadCape("Optional Name.png");
}