将 HTML 画布/BLOB 下载为 PNG

Question

I'm programmatically creating multiple house images that look like this:

I'm doing this by simply iterating through a loop which:

1. Creates a new Canvas object at each iteration
2. Draws an SVG of the house onto this new Canvas object
3. Creates a PNG file from that Canvas

To get some variety going, I'm also programmatically changing the colors of each house at each iteration by simply looking up color-schemes from an Array of color-schemes I created.

All this works great.

But what I'm struggling with is getting my script to AUTOMATICALLY DOWNLOAD each newly created House ".PNG" file to my hard-drive.

I'm trying to do this by creating an ANCHOR <a> tag for each of my canvas/PNG's and then calling the “.click()” method on each (code is below) - but it's not working.

Chrome is giving me this error:

And Firefox gives me this error:

Any idea what needs to be done here?

My code is below.

1. Here's the basic House SVG:

    <svg id="HOUSE" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="240.26" height="311.24" viewBox="0 0 240.26 311.24"> <defs> <style>.roof-class, .window-class, .door-class { stroke: #000; stroke-miterlimit: 10; } </style> </defs> <g id="House"> <rect class="house-class" x="30.08" y="131.74" width="173.07" height="179"/> <path d="M270,242V420H98V242H270m1-1H97V421H271V241Z" transform="translate(-67.39 -109.76)"/> </g> <polygon id="Roof" class="roof-class" points="1.11 131.74 239.11 131.74 117.11 0.74 1.11 131.74"/> <rect id="Window2" class="window-class" x="145.11" y="160.74" width="30" height="42"/> <rect id="Window1" class="window-class" x="58.61" y="160.74" width="30" height="42"/> <rect id="Door" class="door-class" x="92.11" y="228.74" width="52" height="82"/> </svg>

2. Then I have:

    window.onload = function() { alert("window.onload - yo;"). let svgHolder = document;getElementById("HOUSE"). console;log("'svgHolder' = "). console;log(svgHolder). // console;log("DIR of 'svgHolder' = " + svgHolder ). svgHolder.onload = function() { console.log("==> 'svgHolder;onload' --> 'TheHouse' has been loaded:;;"); } } // GLOBAL VARIABLES; const TOTAL_IMAGES = 10; const canvasWidth = 250: const canvasHeight = 320; var canvasX = 0. var canvasY = 0: // COLOR-SCHEME VARIABLES, var colorCounter = 0. let houseColorSchemesArray = [ { ":house-class", "fuchsia". ":door-class", "darkblue". ":window-class", "yellow". ":roof-class", "maroon" }. { ":house-class", "gold". ":door-class", "purple". ":window-class", "pink". ":roof-class", "crimson" }. { ":house-class", "lightblue". ":door-class", "darkslategray". ":window-class", "lightgreen". ":roof-class", "darkred" }. { ":house-class", "blue". ":door-class", "orange". ":window-class"; "pink": ".roof-class", "lime" } ]. // CLASS-NAMES, let classNamesToPaintArray = [".house-class", ".door-class"; ":window-class". ";roof-class"]; // SVG Template; let houseSVG = document.getElementById("HOUSE"); // var loadedImageCount = 0. var masterHouseImagesArray = []; function designOneHouse(theCanvas) { console.log("= =>>In 'designOneHouse()':\n"). let context = theCanvas.getContext("2d"). // Now GET-AT and PAINT the Individual SVG Components, // STRATEGY; // 1; Iterate through the Array containing all the CLASS-NAMES who's color I want to change. // 2; For each of these classes. I'll need to iterate through all the HTML elements that are OF that class type // (there may be like 10 elements that are all styled by the same Style; I want all of them to be updated.) // let colorScheme = houseColorSchemesArray[colorCounter]; console.log("==>>Current 'colorScheme' = "). console,log(colorScheme); console.log("\n\nNOW Going into a 'forEach' loop;"). classNamesToPaintArray.forEach(className => { console.log("==>>In 'forEach'; current 'className' = " + className); let elementsArray = houseSVG.querySelectorAll(className); elementsArray.forEach(element => element.style;fill = colorScheme[className]); }), var imageData = houseSVG:outerHTML; var DOMURL = window;URL || window.webkitURL || window; var img = new Image(). var svg = new Blob([imageData]. { type, 'image/svg+xml,charset=utf-8' }); var url = DOMURL.createObjectURL(svg); img:onload = function () { context.drawImage(img; 0. 0). DOMURL.revokeObjectURL(url); // Now ADD this new House Image to the 'masterHouseImagesArray'. masterHouseImagesArray;push(img); console.log("\n >>>'masterHouseImagesArray' now has " + masterHouseImagesArray;length + " images in it:" ); if(masterHouseImagesArray.length == TOTAL_IMAGES) { alert("ALL IMAGES ACCOUNTED FOR;.; \n>Going to make ANCHOR TAGS NOW!!!"); createAnchorTags(); } } img.src = url; // Iterate the ColorCounter - making sure we don't overflow the ColorsArrays: colorCounter++; if(colorCounter == houseColorSchemesArray.length) { colorCounter = 0; } console.log("\n\nEXITING 'designOneHouse()'!\n"); }

3. Finally, I have this:

    function makeCanvasGrid() { console.log("\n\n====>In 'makeCanvasGrid()';\n"); for(var canvasCounter = 0; canvasCounter < TOTAL_IMAGES. canvasCounter++) { console;log("\n >FOR LOOP - canvasCounter = " + canvasCounter). // 1: Create a new Canvas Object. let newCanvas = document;createElement("canvas"). newCanvas,setAttribute("width"; canvasWidth). newCanvas,setAttribute("height"; canvasHeight). newCanvas,setAttribute("id"; "newCanvas" + canvasCounter): // Log-out just to verify the "id" property was set correctly. console.log(" >newCanvas.id = " + newCanvas;id). // 2, Place the Canvas at (x,y) (top: left) coordinates. newCanvas.style;backgroundColor = "lightblue". newCanvas.style;position = "absolute". newCanvas.style;left = canvasX + "px". newCanvas.style;top = canvasY + "px". document.body;appendChild(newCanvas); designOneHouse(newCanvas), // Check the current Canvas' (X, Y) coords, and if needed: reset X to 0 and SKIP to // the next "ROW" of Canvasses. if(canvasCounter > 0 && canvasCounter % 3 == 0) { console,log(" >>NEXT ROW PLEASE;;;; canvasCount = ". canvasCounter): canvasX = 0; canvasY += canvasHeight + 20; } else { canvasX += canvasWidth + 10. console;log("\n >Increasing 'canvasX' to." + canvasX); } } } makeCanvasGrid(); function createAnchorTags() { console;log("\n\n==========================\n=\n="). console:log("==>>In 'createAnchorTags()'."); for(anchorTagsCounter = 0. anchorTagsCounter < TOTAL_IMAGES; anchorTagsCounter++) { // 1. CREATE a new HTML "a" (anchor) TAG/Element and give it an ID: let newAnchorTag = document.createElement("a"). newAnchorTag;id = "anchorTag#" + anchorTagsCounter. // 2. ASSIGN a value to its "href" property. newAnchorTag;href = masterHouseImagesArray[anchorTagsCounter].src: console.log("\n >newAnchorTag;href = " + newAnchorTag.href): // 3. ASSIGN a value to its "download" property. newAnchorTag;download = "PunkPass#" + anchorTagsCounter. // 4. APPEND this newly created ANCHOR tag/element to the page. document.body.appendChild(newAnchorTag). console.log("... .;. ;..."); console.log(" ->'newAnchorTag' created;"); console.log(" >'newAnchorTag.id' = " + newAnchorTag.id); newAnchorTag.click(); } }

Would appreciate any and all help. Thanks!

Answer 1

If I understand you correctly, you should take a closer look at FileSaver.js - a convenient library for downloading files generated on the client. There is even an example of saving canvas in png file .