From def0b2c1ad1784398629f162e67a255c496f4800 Mon Sep 17 00:00:00 2001 From: harryranakl Date: Thu, 24 Mar 2022 10:26:37 +0800 Subject: [PATCH 1/2] fix-gsn-error failed to compile the app becuz cant find '@opengsn/gsn' change to '@opengsn/provider' --- packages/react-app/src/NftyWallet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-app/src/NftyWallet.js b/packages/react-app/src/NftyWallet.js index f111ddf..21d65f7 100644 --- a/packages/react-app/src/NftyWallet.js +++ b/packages/react-app/src/NftyWallet.js @@ -4,7 +4,7 @@ import { Button, Badge, Tabs, Row, Col, Drawer, Layout, Menu } from "antd"; import { MenuOutlined } from "@ant-design/icons"; import { PlusOutlined } from "@ant-design/icons"; import { useContractReader, useLocalStorage } from "./hooks"; -import { RelayProvider } from "@opengsn/gsn"; +import { RelayProvider } from "@opengsn/provider"; import { Account, Faucet } from "./components"; import { createClient } from "@supabase/supabase-js"; import Holdings from "./Holdings.js"; From 2f25fa8d1b5399bf976934cefb864a11396c4673 Mon Sep 17 00:00:00 2001 From: harryranakl Date: Fri, 25 Mar 2022 11:21:31 +0800 Subject: [PATCH 2/2] high resolution image data --- packages/react-app/src/CreateInk.js | 75 ++++++++++++++++++++++++++++- 1 file changed, 74 insertions(+), 1 deletion(-) diff --git a/packages/react-app/src/CreateInk.js b/packages/react-app/src/CreateInk.js index 6f717a8..564390f 100644 --- a/packages/react-app/src/CreateInk.js +++ b/packages/react-app/src/CreateInk.js @@ -13,7 +13,8 @@ import { DownloadOutlined, UploadOutlined, InfoCircleOutlined, - BookOutlined + BookOutlined, + FileImageOutlined } from "@ant-design/icons"; import { Row, @@ -210,6 +211,8 @@ export default function CreateInk(props) { //const [loadedLines, setLoadedLines] = useState() const [drawingSaved, setDrawingSaved] = useState(true); + const [isPreviewInk, setIsPreviewInk ] = useState(false); + const [previewImageData, setPreviewImageData ] = useState(""); const portraitRatio = 1.7; const portraitCalc = @@ -435,6 +438,41 @@ export default function CreateInk(props) { return result; }; + const handlePreviewVisible = v => { + setIsPreviewInk(v); + }; + const PreviewInk = async () => { + await setSending(true); + let imageData = await drawingCanvas.current.canvas.drawing.toDataURL("image/png"); + // await setPreviewImageData(imageData); + // setSending(false); + + // test code + // const _el = new Image(); + // _el.src = imageData; + // _el.style.width = (size[0]) + "px"; + // _el.style.height = (size[1]) + "px"; + // await document.body.appendChild(_el); + + const _i = new Image(); + _i.src = await imageData; + _i.style.width = (size[0]*2) + "px"; + _i.style.height = (size[1]*2) + "px"; + _i.onload = async () => { + const _c = document.createElement('canvas'); + const _ct = _c.getContext('2d'); + _c.width = (size[0] * 2) ; + _c.height = (size[1] * 2) ; + await _ct.drawImage(_i, 0, 0, size[0] * 2, size[1] * 2); + // await document.body.appendChild(_c); + + let _d = await _c.toDataURL(); + await setPreviewImageData(_d); + setSending(false); + } + + } + const createInk = async values => { console.log("Inking:", values); @@ -814,6 +852,41 @@ export default function CreateInk(props) { > PLAY + + + + } + overlayStyle={{paddingRight: '30px'}} + fitToScreen={true} + placement="bottom" + title="Preview Ink" + trigger="click" + visible={isPreviewInk} + onVisibleChange={handlePreviewVisible} + > + + );