Skip to content

icon background using image #423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nini22P merged 2 commits into from
May 28, 2025
Merged

icon background using image #423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eec67af
icon background using image
nini22P May 26, 2025
208a633
transparent background are supported when creating icons
nini22P May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 33 additions & 51 deletions packages/origine2/src/components/IconCreator/IconCreator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto

const [iconShape, setIconShape] = useState<IIconShape>('square');
const [backgroundStyle, setBackgroundStyle] = useState<IBackgroundStyle>('color');
const [backgroundColor, setBackgroundColor] = useState('#FFFFFF');
const [backgroundColor, setBackgroundColor] = useState('#FFFFFF00');
const [gridLineColor, setGridLineColor] = useState<'#FFFFFF' | '#000000'>('#000000');
const [icons, setIcons] = useState<IIcons | null>(null);

Expand Down Expand Up @@ -167,7 +167,7 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto
if (ctx) {
ctx.clearRect(0, 0, canvasSize, canvasSize);
if (backgroundStyle === 'color') {
ctx.fillStyle = tinycolor(backgroundColor).toHex8String();
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, canvasSize, canvasSize);
} else if (backgroundStyle === 'image') {
// ctx.fillStyle = '#FFFFFF';
Expand Down Expand Up @@ -341,9 +341,11 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto
* @param imageDataUTL 要裁剪的图像 Data URL。
* @param inset 0-1 之间的值，表示裁剪区域的内边距百分比。
* @param shape 裁剪的形状。
* @param format 图像格式。默认为 'png'。
* @returns 裁剪后的图像 Data URL。
*/
const clipImage = async (imageDataUTL: string, inset: number, shape: IIconShape): Promise<string> => {
// eslint-disable-next-line max-params
const clipImage = async (imageDataUTL: string, inset: number, shape: IIconShape, format = 'png'): Promise<string> => {
const img = new Image();
img.src = imageDataUTL;

Expand Down Expand Up @@ -392,7 +394,7 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto

ctx.drawImage(img, drawX, drawY, img.width, img.height);

return canvas.toDataURL();
return canvas.toDataURL(`image/${format}`);
};

/**
Expand All @@ -401,12 +403,15 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto
* @param imageDataURL 要调整的图像 Data URL。
* @param size 新图像的尺寸。
* @param padding 0-1 之间的值，表示边距占图像大小的比例。
* @param format 图像格式。默认为 'png'。
* @returns 调整后的图像 Data URL。
*/
const resizeImage = async (
imageDataURL: string,
size: number,
padding = 0,
format = 'png',
// eslint-disable-next-line max-params
): Promise<string> => {
const img = new Image();
img.src = imageDataURL;
Expand All @@ -433,7 +438,7 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto

ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);

return canvas.toDataURL();
return canvas.toDataURL(`image/${format}`);
};

const clipIcons = async () => {
Expand All @@ -453,7 +458,7 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto
]);
const ico = URL.createObjectURL(new Blob([icoBlob], { type: 'image/x-icon' }));

const androidFullBleed = await getCompositedImage([background, foreground], canvasSize, backgroundStyle === 'color' ? backgroundColor : undefined);
const androidFullBleed = await getCompositedImage([background, foreground], canvasSize);
if (!androidFullBleed) return null;
const androidLegacyImage = await clipImage(maskable, clipInset.android.legacy, 'rounded-rectangle');
const androidRoundImage = await clipImage(maskable, clipInset.android.round, 'circle');
Expand Down Expand Up @@ -520,23 +525,10 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto
icLauncherPlayStoreFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidFullBleed.src, 512)), 'ic_launcher-playstore.png');
await axios.post('/api/assets/upload', icLauncherPlayStoreFormData);

// values 文件夹
if (backgroundStyle === 'color') {
const icLauncherBackgroundXmlContent = `<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ic_launcher_background">${tinycolor(backgroundColor).toHexString()}</color>
</resources>`;
const icLauncherBackgroundXmlBlob = new Blob([icLauncherBackgroundXmlContent], { type: 'text/xml' });
const valuesFormData = new FormData();
valuesFormData.append('targetDirectory', `games/${gameDir}/icons/android/values`);
valuesFormData.append('files', icLauncherBackgroundXmlBlob, 'ic_launcher_background.xml');
await axios.post('/api/assets/upload', valuesFormData);
}

// mipmap-anydpi-v26 文件夹
const icLauncherXmlContent = `<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="${backgroundStyle === 'color' ? '@color' : '@mipmap'}/ic_launcher_background"/>
<background android:drawable="@mipmap/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>`;
const icLauncherXmlBlob = new Blob([icLauncherXmlContent], { type: 'text/xml' });
Expand All @@ -549,56 +541,46 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto
// mipmap-xxxhdpi 文件夹
const xxxhdpiFormData = new FormData();
xxxhdpiFormData.append('targetDirectory', `games/${gameDir}/icons/android/mipmap-xxxhdpi`);
xxxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 192)), 'ic_launcher.png');
xxxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 192)), 'ic_launcher_round.png');
xxxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 432)), 'ic_launcher_foreground.png');
if (backgroundStyle === 'image') {
xxxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 432)), 'ic_launcher_background.png');
}
xxxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 192, 0, 'webp')), 'ic_launcher.webp');
xxxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 192, 0, 'webp')), 'ic_launcher_round.webp');
xxxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 432, 0, 'webp')), 'ic_launcher_foreground.webp');
xxxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 432, 0, 'webp')), 'ic_launcher_background.webp');
await axios.post('/api/assets/upload', xxxhdpiFormData);

// mipmap-xxhdpi 文件夹
const xxhdpiFormData = new FormData();
xxhdpiFormData.append('targetDirectory', `games/${gameDir}/icons/android/mipmap-xxhdpi`);
xxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 144)), 'ic_launcher.png');
xxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 144)), 'ic_launcher_round.png');
xxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 324)), 'ic_launcher_foreground.png');
if (backgroundStyle === 'image') {
xxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 324)), 'ic_launcher_background.png');
}
xxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 144, 0, 'webp')), 'ic_launcher.webp');
xxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 144, 0, 'webp')), 'ic_launcher_round.webp');
xxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 324, 0, 'webp')), 'ic_launcher_foreground.webp');
xxhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 324, 0, 'webp')), 'ic_launcher_background.webp');
await axios.post('/api/assets/upload', xxhdpiFormData);

// mipmap-xhdpi 文件夹
const xhdpiFormData = new FormData();
xhdpiFormData.append('targetDirectory', `games/${gameDir}/icons/android/mipmap-xhdpi`);
xhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 96)), 'ic_launcher.png');
xhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 96)), 'ic_launcher_round.png');
xhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 216)), 'ic_launcher_foreground.png');
if (backgroundStyle === 'image') {
xhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 216)), 'ic_launcher_background.png');
}
xhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 96, 0, 'webp')), 'ic_launcher.webp');
xhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 96, 0, 'webp')), 'ic_launcher_round.webp');
xhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 216, 0, 'webp')), 'ic_launcher_foreground.webp');
xhdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 216, 0, 'webp')), 'ic_launcher_background.webp');
await axios.post('/api/assets/upload', xhdpiFormData);

// mipmap-hdpi 文件夹
const hdpiFormData = new FormData();
hdpiFormData.append('targetDirectory', `games/${gameDir}/icons/android/mipmap-hdpi`);
hdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 72)), 'ic_launcher.png');
hdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 72)), 'ic_launcher_round.png');
hdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 162)), 'ic_launcher_foreground.png');
if (backgroundStyle === 'image') {
hdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 162)), 'ic_launcher_background.png');
}
hdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 72, 0, 'webp')), 'ic_launcher.webp');
hdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 72, 0, 'webp')), 'ic_launcher_round.webp');
hdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 162, 0, 'webp')), 'ic_launcher_foreground.webp');
hdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 162, 0, 'webp')), 'ic_launcher_background.webp');
await axios.post('/api/assets/upload', hdpiFormData);

// mipmap-mdpi 文件夹
const mdpiFormData = new FormData();
mdpiFormData.append('targetDirectory', `games/${gameDir}/icons/android/mipmap-mdpi`);
mdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 48)), 'mipmap-mdpi/ic_launcher.png');
mdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 48)), 'mipmap-mdpi/ic_launcher_round.png');
mdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 108)), 'mipmap-mdpi/ic_launcher_foreground.png');
if (backgroundStyle === 'image') {
mdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 108)), 'ic_launcher_background.png');
}
mdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidLegacy.src, 48, 0, 'webp')), 'mipmap-mdpi/ic_launcher.webp');
mdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidRound.src, 48, 0, 'webp')), 'mipmap-mdpi/ic_launcher_round.webp');
mdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidForeground.src, 108, 0, 'webp')), 'mipmap-mdpi/ic_launcher_foreground.webp');
mdpiFormData.append('files', await dataURLToBlob(await resizeImage(icons.androidBackground.src, 108, 0, 'webp')), 'ic_launcher_background.webp');
await axios.post('/api/assets/upload', mdpiFormData);
console.log('上传 Android 图标成功');
} catch (error) {
Expand All @@ -613,7 +595,7 @@ const IconCreator = ({ gameDir, triggerButton }: { gameDir: string, triggerButto
setIsOpen(false);
setForegroundImage(null);
setBackgroundImage(null);
setBackgroundColor('#FFFFFF');
setBackgroundColor('#FFFFFF00');
setForegroundOffset({ x: 0, y: 0 });
setBackgroundOffset({ x: 0, y: 0 });
setForegroundScale(1);
Expand Down
42 changes: 21 additions & 21 deletions packages/origine2/src/locales/en.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ msgstr "z-index"
msgid "一直显示功能区"
msgstr "Always Show Toolbar"

#: src/components/IconCreator/IconCreator.tsx:792
#: src/components/IconCreator/IconCreator.tsx:774
msgid "上一步"
msgstr "Previous"

Expand All @@ -213,7 +213,7 @@ msgstr "Upload"
msgid "上传资源"
msgstr "Upload asset"

#: src/components/IconCreator/IconCreator.tsx:789
#: src/components/IconCreator/IconCreator.tsx:771
msgid "下一步"
msgstr "Next"

Expand Down Expand Up @@ -364,11 +364,11 @@ msgstr "Sidebar"
msgid "侧边栏游戏预览"
msgstr "Sidebar Game Preview"

#: src/components/IconCreator/IconCreator.tsx:811
#: src/components/IconCreator/IconCreator.tsx:793
msgid "保存"
msgstr "Save"

#: src/components/IconCreator/IconCreator.tsx:635
#: src/components/IconCreator/IconCreator.tsx:617
#: src/pages/editor/Topbar/tabs/GameConfig/GameConfig.tsx:202
msgid "修改游戏图标"
msgstr "Change game icon"
Expand Down Expand Up @@ -578,7 +578,7 @@ msgstr "Refresh"
msgid "刷新游戏"
msgstr "Refresh game"

#: src/components/IconCreator/IconCreator.tsx:668
#: src/components/IconCreator/IconCreator.tsx:650
msgid "前景"
msgstr "Foreground"

Expand Down Expand Up @@ -624,7 +624,7 @@ msgid "发现新版本"
msgstr "New version detected"

#: src/components/ColorPickerPopup/ColorPickerPopup.tsx:115
#: src/components/IconCreator/IconCreator.tsx:788
#: src/components/IconCreator/IconCreator.tsx:770
#: src/pages/editor/ChooseFile/ChooseFile.tsx:55
#: src/pages/templateEditor/TemplateEditorSidebar/TemplateEditorSidebar.tsx:171
msgid "取消"
Expand Down Expand Up @@ -684,20 +684,20 @@ msgstr "Image"
msgid "图形编辑器"
msgstr "Graphical editor"

#: src/components/IconCreator/IconCreator.tsx:698
#: src/components/IconCreator/IconCreator.tsx:704
#: src/components/IconCreator/IconCreator.tsx:680
#: src/components/IconCreator/IconCreator.tsx:686
msgid "图片"
msgstr "Image"

#: src/components/IconCreator/IconCreator.tsx:628
#: src/components/IconCreator/IconCreator.tsx:610
msgid "圆形"
msgstr "Circle"

#: src/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/editorTable.ts:59
msgid "圆角"
msgstr "Rounded corners"

#: src/components/IconCreator/IconCreator.tsx:629
#: src/components/IconCreator/IconCreator.tsx:611
msgid "圆角矩形"
msgstr "Rounded rectangle"

Expand Down Expand Up @@ -1254,7 +1254,7 @@ msgstr "New template"
msgid "新的游戏"
msgstr "New game"

#: src/components/IconCreator/IconCreator.tsx:627
#: src/components/IconCreator/IconCreator.tsx:609
msgid "方形"
msgstr "Square"

Expand Down Expand Up @@ -1714,7 +1714,7 @@ msgstr "Absolutely"
#~ msgid "绿色（0-255）："
#~ msgstr "Green (0-255)"

#: src/components/IconCreator/IconCreator.tsx:643
#: src/components/IconCreator/IconCreator.tsx:625
msgid "编辑图标"
msgstr "Edit icon"

Expand Down Expand Up @@ -1744,7 +1744,7 @@ msgstr "Scale"
msgid "老电影滤镜"
msgstr "Old film filter"

#: src/components/IconCreator/IconCreator.tsx:696
#: src/components/IconCreator/IconCreator.tsx:678
#: src/pages/editor/EditorSidebar/EditorSidebar.tsx:113
#: src/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/editorTable.ts:64
msgid "背景"
Expand Down Expand Up @@ -1843,7 +1843,7 @@ msgstr "Get input"
msgid "行脚本"
msgstr "Line of script"

#: src/components/IconCreator/IconCreator.tsx:742
#: src/components/IconCreator/IconCreator.tsx:724
msgid "裁剪形状"
msgstr "Clip Shape"

Expand Down Expand Up @@ -1949,11 +1949,11 @@ msgstr "Language"
msgid "语音"
msgstr "Voice"

#: src/components/IconCreator/IconCreator.tsx:688
#: src/components/IconCreator/IconCreator.tsx:670
msgid "调整前景图片"
msgstr "Resize foreground image"

#: src/components/IconCreator/IconCreator.tsx:732
#: src/components/IconCreator/IconCreator.tsx:714
msgid "调整背景图片"
msgstr "Resize background image"

Expand Down Expand Up @@ -2011,8 +2011,8 @@ msgstr "Choose"
msgid "选择动画"
msgstr "Choose Animation"

#: src/components/IconCreator/IconCreator.tsx:682
#: src/components/IconCreator/IconCreator.tsx:727
#: src/components/IconCreator/IconCreator.tsx:664
#: src/components/IconCreator/IconCreator.tsx:709
msgid "选择图片"
msgstr "Choose Image"

Expand Down Expand Up @@ -2201,12 +2201,12 @@ msgstr "Music"
msgid "项目主页"
msgstr "Project Homepage"

#: src/components/IconCreator/IconCreator.tsx:643
#: src/components/IconCreator/IconCreator.tsx:625
msgid "预览图标"
msgstr "Preview icon"

#: src/components/IconCreator/IconCreator.tsx:698
#: src/components/IconCreator/IconCreator.tsx:703
#: src/components/IconCreator/IconCreator.tsx:680
#: src/components/IconCreator/IconCreator.tsx:685
#: src/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/editorTable.ts:44
#: src/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/propertyEditor/WGBackgroundEditor.tsx:49
msgid "颜色"
Expand Down
Loading