add ctrl+c to copy render result
&& fix shift+r tigger manual inpainting
This commit is contained in:
parent
c97f32bd13
commit
0ed0d820f6
@ -22,6 +22,8 @@ import Button from '../shared/Button'
|
|||||||
import Slider from './Slider'
|
import Slider from './Slider'
|
||||||
import SizeSelector from './SizeSelector'
|
import SizeSelector from './SizeSelector'
|
||||||
import {
|
import {
|
||||||
|
askWritePermission,
|
||||||
|
copyCanvasImage,
|
||||||
downloadImage,
|
downloadImage,
|
||||||
isMidClick,
|
isMidClick,
|
||||||
isRightClick,
|
isRightClick,
|
||||||
@ -846,7 +848,27 @@ export default function Editor(props: EditorProps) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{},
|
{},
|
||||||
[runMannually]
|
[runMannually, runInpainting, hadDrawSomething]
|
||||||
|
)
|
||||||
|
|
||||||
|
useHotKey(
|
||||||
|
'ctrl+c, cmd+c',
|
||||||
|
async () => {
|
||||||
|
const hasPermission = await askWritePermission()
|
||||||
|
if (hasPermission && renders.length > 0) {
|
||||||
|
if (context?.canvas) {
|
||||||
|
await copyCanvasImage(context?.canvas)
|
||||||
|
setToastState({
|
||||||
|
open: true,
|
||||||
|
desc: 'Copy inpainting result to clipboard',
|
||||||
|
state: 'success',
|
||||||
|
duration: 3000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
[renders, context]
|
||||||
)
|
)
|
||||||
|
|
||||||
// Toggle clean/zoom tool on spacebar.
|
// Toggle clean/zoom tool on spacebar.
|
||||||
|
@ -202,3 +202,43 @@ export function srcToFile(src: string, fileName: string, mimeType: string) {
|
|||||||
return new File([buf], fileName, { type: mimeType })
|
return new File([buf], fileName, { type: mimeType })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function askWritePermission() {
|
||||||
|
try {
|
||||||
|
// The clipboard-write permission is granted automatically to pages
|
||||||
|
// when they are the active tab. So it's not required, but it's more safe.
|
||||||
|
const { state } = await navigator.permissions.query({
|
||||||
|
name: 'clipboard-write' as PermissionName,
|
||||||
|
})
|
||||||
|
return state === 'granted'
|
||||||
|
} catch (error) {
|
||||||
|
// Browser compatibility / Security error (ONLY HTTPS) ...
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function canvasToBlob(canvas: HTMLCanvasElement, mime: string): Promise<any> {
|
||||||
|
return new Promise((resolve, reject) =>
|
||||||
|
canvas.toBlob(async d => {
|
||||||
|
if (d) {
|
||||||
|
resolve(d)
|
||||||
|
} else {
|
||||||
|
reject(new Error('Expected toBlob() to be defined'))
|
||||||
|
}
|
||||||
|
}, mime)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const setToClipboard = async (blob: any) => {
|
||||||
|
const data = [new ClipboardItem({ [blob.type]: blob })]
|
||||||
|
await navigator.clipboard.write(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function copyCanvasImage(canvas: HTMLCanvasElement) {
|
||||||
|
const blob = await canvasToBlob(canvas, 'image/png')
|
||||||
|
try {
|
||||||
|
await setToClipboard(blob)
|
||||||
|
} catch {
|
||||||
|
console.log('Copy image failed!')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user