Save image

client/src/components/Canvas.jsx

@@ -305,6 +305,8 @@ const ImgCanvas = ({
 
 const FinalCanvas = ({
     finalImgUrl,
+    finalCanvasHeight,
+    finalCanvasWidth,
     finalText,
     finalFont,
     finalFontSize,
@@ -315,6 +317,7 @@ const FinalCanvas = ({
     finalBgOpacity,
     generateFinalCanvas,
     photographer,
+    setFinalDataURI,
     id,
 }) => {
     const canvasRef = useRef(null);
@@ -329,14 +332,19 @@ const FinalCanvas = ({
             canvasRef.current.width,
             canvasRef.current.height
         );
+
         let base_image = new Image();
         base_image.src = finalImgUrl;
+        base_image.crossOrigin = "Anonymous";
 
         base_image.onload = function () {
             // set height of canvas to ratio determined by base_image width/height ratio
-            const ratio = base_image.height / base_image.width;
+            // const ratio = base_image.height / base_image.width;
+
+            // canvasRef.current.height = canvasRef.current.width * ratio;
 
-            canvasRef.current.height = canvasRef.current.width * ratio;
+            canvasRef.current.width = finalCanvasWidth;
+            canvasRef.current.height = finalCanvasHeight;
 
             // set size of image to match new canvas size
             context.drawImage(
@@ -381,6 +389,10 @@ const FinalCanvas = ({
                 photographer,
                 "Unsplash"
             );
+            // display final image
+            setFinalDataURI((URI) => {
+                canvasRef.current.toDataURL();
+            });
         };
         // should this just keep track of a state var e.g. "generated" then run this function? Set true in generate final function?
     }, [
@@ -426,10 +438,12 @@ const FinalCanvas = ({
         canvasRef.current.style.width = styleWidth;
     }, []);
 
-    const handleGenerateFinalCanvas = () => {
-        console.log("making the final image");
-        generateFinalCanvas();
-    };
+    //moved to Create.jsx
+
+    // const handleGenerateFinalCanvas = () => {
+    //     console.log("making the final image");
+    //     generateFinalCanvas();
+    // };
 
     return (
         <div>
@@ -442,7 +456,7 @@ const FinalCanvas = ({
                 // fontWeight={fontWeight}
                 // textColor={textColor}
                 width={window.outerWidth}
-                onClick={handleGenerateFinalCanvas}
+                // onClick={handleGenerateFinalCanvas}
                 id={id}
             />
         </div>

client/src/components/FinalImgArea.jsx

@@ -1,36 +1,44 @@
-import React from 'react'
+import React from "react";
 import { FinalCanvas } from ".";
 
-
-const FinalImgArea = ({finalImgUrl,
+const FinalImgArea = ({
+    finalImgUrl,
     finalText,
+    finalCanvasHeight,
+    finalCanvasWidth,
     finalFont,
     finalFontSize,
     finalFontWeight,
     finalTextColor,
     finalMargin,
     finalBgColor,
     finalBgOpacity,
-    generateFinalCanvas,photographer}) => {
+    generateFinalCanvas,
+    photographer,
+    setFinalDataURI,
+}) => {
     return (
         <div>
             <FinalCanvas
-                    finalImgUrl={finalImgUrl}
-                    finalText={finalText}
-                    finalFont={finalFont}
-                    finalFontSize={finalFontSize}
-                    finalFontWeight={finalFontWeight}
-                    finalTextColor={finalTextColor}
-                    width={window.outerWidth}
-                    finalMargin = {finalMargin}
-                    finalBgColor= {finalBgColor}
-                    finalBgOpacity = {finalBgOpacity}
-                    generateFinalCanvas={generateFinalCanvas}
-                    photographer = {photographer}
-                    id="finalCanvas"
-                /> 
+                finalImgUrl={finalImgUrl}
+                finalCanvasHeight={finalCanvasHeight}
+                finalCanvasWidth={finalCanvasWidth}
+                finalText={finalText}
+                finalFont={finalFont}
+                finalFontSize={finalFontSize}
+                finalFontWeight={finalFontWeight}
+                finalTextColor={finalTextColor}
+                width={window.outerWidth}
+                finalMargin={finalMargin}
+                finalBgColor={finalBgColor}
+                finalBgOpacity={finalBgOpacity}
+                generateFinalCanvas={generateFinalCanvas}
+                photographer={photographer}
+                setFinalDataURI={setFinalDataURI}
+                id="finalCanvas"
+            />
         </div>
-    )
-}
+    );
+};
 
-export default FinalImgArea
+export default FinalImgArea;

client/src/pages/Create.jsx

@@ -12,8 +12,7 @@ import {
 } from "../components";
 import background from "../images/blossom.jpg"; // need to get this from state passed from app.js
 import styled from "styled-components";
-// import { UNSPLASH_ACCESS_KEY } from "../app/keys";
-// const unsplash = process.env.UNSPLASH_ACCESS_KEY; //undefined
+
 const unsplash = process.env.REACT_APP_UNSPLASH_ACCESS_KEY
     ? process.env.REACT_APP_UNSPLASH_ACCESS_KEY
     : require("../app/keys.js").UNSPLASH_ACCESS_KEY;
@@ -54,6 +53,12 @@ const ImgQuotebtn = styled.div.attrs({
     text-align: -webkit-center;
 `;
 
+// const btnDisplay = document.querySelector("#btnDisplay");
+// const getURL = () => {
+//     const dataURI = FinalCanvas.toDataURL();
+//     console.log(dataURI);
+// };
+
 const Create = () => {
     const [text, setText] = useState("");
     const [font, setFont] = useState("Ariel");
@@ -66,7 +71,7 @@ const Create = () => {
     const [bgColor, setBgColor] = useState("#444444");
     const [bgOpacity, setBgOpacity] = useState(0.5);
 
-    // final image state settings
+    // final image state settings (value, function)
     const [finalImgUrl, setFinalImgUrl] = useState("");
     const [finalText, setFinalText] = useState("");
     const [finalFont, setFinalFont] = useState("Ariel");
@@ -78,7 +83,8 @@ const Create = () => {
     const [finalMargin, setFinalMargin] = useState(0);
     const [finalBgColor, setFinalBgColor] = useState("#ffffff");
     const [finalBgOpacity, setFinalBgOpacity] = useState(0.2);
-    const [finalUrl, setFinalUrl] = useState("robbmdev.com");
+    const [finalUrl, setFinalUrl] = useState("thisNeedsToBeTheImageToSave");
+    const [finalDataURI, setFinalDataURI] = useState("");
 
     //Quote Api
     const [random, setRandom] = useState(true); //set to true for production!!
@@ -91,6 +97,8 @@ const Create = () => {
 
     const leftSideRef = useRef(null);
 
+    //Generate Final Canvas
+
     const generateFinalCanvas = () => {
         setFinalImgUrl(imgUrl);
         setFinalText(text);
@@ -101,6 +109,9 @@ const Create = () => {
         setFinalMargin(margin);
         setFinalBgColor(bgColor);
         setFinalBgOpacity(bgOpacity);
+        setFinalCanvasHeight(canvasHeight);
+        setFinalCanvasWidth(canvasWidth);
+        console.log(finalDataURI);
         // save to db then
         // setFinalUrl("url/for/view/page");
     };
@@ -312,6 +323,11 @@ const Create = () => {
         getQuote();
     };
 
+    const handleGenerateFinalCanvas = () => {
+        console.log("making the final image");
+        generateFinalCanvas();
+    };
+
     return (
         <PageWrapper>
             <SearchbarContainer>
@@ -347,6 +363,8 @@ const Create = () => {
                         />
                         <FinalImgArea
                             finalImgUrl={finalImgUrl}
+                            finalCanvasHeight={finalCanvasHeight}
+                            finalCanvasWidth={finalCanvasWidth}
                             finalText={finalText}
                             finalFont={finalFont}
                             finalFontSize={finalFontSize}
@@ -358,6 +376,7 @@ const Create = () => {
                             finalBgOpacity={finalBgOpacity}
                             generateFinalCanvas={generateFinalCanvas}
                             photographer={photographer}
+                            setFinalDataURI={setFinalDataURI}
                         />
                     </ImageWrapper>
                     {/* open modal button */}
@@ -394,12 +413,14 @@ const Create = () => {
                         </button> bring back for Version 2 */}
                         <button
                             type="button"
+                            id="btnDisplay"
                             className="btn yellow-background red-text mt-3 "
                             data-toggle="modal"
                             data-target="#"
                             style={{ left: "50%", width: "60%" }}
+                            onClick={handleGenerateFinalCanvas}
                         >
-                            Save(disabled)
+                            Display(x)
                         </button>
                         <ShareModal
                             searchTerm={searchTerm}