Val Town Code SearchReturn to Val Town

1/**
2 * This app allows users to drop an image onto the canvas, add text to it, move the text around,
3 * edit the text directly on the canvas, and save the result to their local disk.
4 * We'll use the HTML5 Canvas API for image manipulation and the File System Access API for saving files.
5 * The app is styled with a playful and colorful design, using the Caveat font for a handwritten feel.
6 */
11
12function App() {
13  const [image, setImage] = useState(null);
14  const [text, setText] = useState("Enter text here");
15  const [textPosition, setTextPosition] = useState({ x: 250, y: 250 });
25    window.addEventListener('resize', handleResize);
26    return () => window.removeEventListener('resize', handleResize);
27  }, [image, text, textPosition, canvasSize, textColor, fontSize, fontFamily]);
28
29  const handleResize = () => {
30    if (!image) {
31      setCanvasSize({ width: window.innerWidth, height: window.innerHeight });
32    }
38    ctx.clearRect(0, 0, canvas.width, canvas.height);
39    
40    if (image) {
41      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
42    } else {
43      ctx.fillStyle = "#f0f0f0";
46      ctx.font = "20px Caveat";
47      ctx.textAlign = "center";
48      ctx.fillText("Drop an image here", canvas.width / 2, canvas.height / 2);
49    }
50
95    e.preventDefault();
96    const file = e.dataTransfer.files[0];
97    if (file && file.type.startsWith('image/')) {
98      const reader = new FileReader();
99      reader.onload = (event) => {
100        const img = new Image();
101        img.onload = () => {
102          setImage(img);
103          const aspectRatio = img.width / img.height;
104          let newWidth = Math.min(window.innerWidth, img.width);
123  const handleSave = async () => {
124    try {
125      const blob = await new Promise(resolve => canvasRef.current.toBlob(resolve, 'image/png'));
126      const handle = await window.showSaveFilePicker({
127        suggestedName: 'image-with-text.png',
128        types: [{
129          description: 'PNG Files',
130          accept: {'image/png': ['.png']},
131        }],
132      });
134      await writable.write(blob);
135      await writable.close();
136      console.log('Image saved successfully!');
137    } catch (err) {
138      console.error('Error saving the image:', err);
139      console.log('Failed to save the image. Please try again.');
140    }
141  };
169          <option value="Courier New">Courier New</option>
170        </select>
171        <button onClick={handleSave} disabled={!image} className="save-button">
172          Save Image with Text
173        </button>
174        <a href={import.meta.url.replace("esm.town", "val.town")} className="source-link">View Source</a>

3Protect your vals behind a password. Use session cookies to persist authentication.
4
5![6ed0648ae8813e958dbe79468572cb52f578239c0fae55857a13660beebdc5fd.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36c1dc4f-4e19-457b-ad89-0bf139754e00/public)
6
7## Demo

4      "name": "SY Lee",
5      "label": "Developer",
6      "image": "",
7      "email": "shiyung@gmail.com",
8      "phone": "",
35        "highlights": [
36          "Built an event management platform with secure authentication and full CRUD capabilities, streamlining client operations",
37          "Crafted a website for a food truck that captures their unique branding and playful image. The site features a fun, user-centric interface that facilitates online inquiries and enhances user engagement",
38          "Designed and developed a responsive, accessibility-focused website for a law firm, improving client accessibility and increasing inquiries by 20%",
39        ],
145        "highlights": [
146          "Enhanced scene consistency with seed settings and introduced controls for motion, quality, and frame rate adjustments",
147          "Integrated GPT-3.5 for prompt enhancement, significantly improving image and video quality",
148          "Overcame the challenge of running FFmpeg client-side in Next.js, enabling real-time video processing in the browser",
149        ],

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

17            <meta name="viewport" content="width=device-width, initial-scale=1.0">
18            <title>hello, resume</title>
19            <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='50%' font-size='24' text-anchor='middle' x='50%' dy='.3em'>📄</text></svg>">
20            <style>
21              ${helloResume}

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

16You can try a demo at <https://pomdtr-lastloginhonoexample.web.val.run> (see @pomdtr/lastLoginHonoExample for code)
17
18![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/cbabf6bc-27dd-489b-2153-a40957986100/public)
19
20## Usage

1
2![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7442086d-36b2-454d-bd5f-3c28615e9000/public)
3

2
3
4![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36674739-cd88-472c-df16-cd0b3a62bc00/public)
5
6Live demo: https://stevekrouse-lastlogin_demo.web.val.run/

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install