add ctrl+c to copy render result

&& fix shift+r tigger manual inpainting
This commit is contained in:
Qing 2022-09-25 22:30:52 +08:00
parent c97f32bd13
commit 0ed0d820f6
2 changed files with 63 additions and 1 deletions

View File

@ -22,6 +22,8 @@ import Button from '../shared/Button'
import Slider from './Slider'
import SizeSelector from './SizeSelector'
import {
askWritePermission,
copyCanvasImage,
downloadImage,
isMidClick,
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.

View File

@ -202,3 +202,43 @@ export function srcToFile(src: string, fileName: string, mimeType: string) {
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!')
}
}