2f:Tabe,test = { let row = 0; let col = -1; let chunk = BatchRenderSync.chunks.at(row) let item = chunk.textObjects.at(col) // let url = URL.createObjectURL(chunk.blob) // invalidation.then(()=>URL.revokeObjectURL(url)) return svg``; } 30:T938,function renderTextToCanvasChunks(texts, { gap = 0, // Gap between texts fill = "black", // Default text color family = "Arial", // Default font family size = 10, // Default font size resolution = 1, // Default resolution scaling maxCanvasWidth = 4096, // Maximum safe canvas width canvas = document.createElement('canvas') } = {}) { const output = []; // Array to store results: { dataURL, textObjects } // Helper function to calculate the total width of a given textObjects array const textObjects = texts.map(text=>measureText(text,arguments[1])) // Partition the textObjects array into chunks that fit within maxCanvasWidth let span = textObjects.length; // let currentChunk = []; let currentChunkWidth = 0; let maxHeight = 0; let last,textObj,prev = 0; for (var i = 0; i < span; ++i) { textObj = textObjects[i] const newChunkWidth = currentChunkWidth + textObj.width + (i > prev /*currentChunk.length > 0*/ ? gap : 0); if (newChunkWidth > maxCanvasWidth) { // If adding this text exceeds the max width, process the current chunk // Subtract last chunk width that exceeded the maxCanvasWidth output.push(renderChunkToCanvas(textObjects.slice(prev,i), { chunk: output.length, gap, fill, family, size, resolution,canvas, chunkWidth: last.offset + last.width, chunkHeight:maxHeight, })); // Start a new chunk with the current text => deprecated in favour of array slicing // currentChunk = [textObj]; last = Object.assign(textObj, {id:i,offset:0}) prev = i ; // store the last index for slicing next chunk currentChunkWidth = textObj.width; } else { // Store maximum text height if(textObj.height > maxHeight) maxHeight = textObj.height // Add the text to the current chunk => deprecated in favour of array slicing // currentChunk.push(textObj); last = Object.assign(textObj, {id:i,offset:(newChunkWidth - textObj.width)}) currentChunkWidth = newChunkWidth; } } // Process any remaining texts in the last chunk if (i > prev /*currentChunk.length > 0*/) { output.push(renderChunkToCanvas(textObjects.slice(prev,i), { gap, fill, family, size, resolution,canvas,chunkWidth:last.offset + last.width, chunkHeight:maxHeight })); } return output }31:Ta32,// Helper function to render a single chunk of textObjects to a canvas function renderChunkToCanvas(textObjects, { gap = 0, fill = "black", family = "Arial", size = 10, // in points resolution = 1, canvas = document.createElement('canvas'), chunkWidth,chunkHeight,chunk = 0, }) { let subpixelOffset = Math.min(Math.max(1,1/resolution),2) // Calculate the total width and height for the canvas const totalWidth = chunkWidth ?? textObjects.reduce((sum, textObj) => sum + textObj.width + gap, 0) - gap ; const maxHeight = (chunkHeight ?? Math.max(...textObjects.map(textObj => textObj.height))) + (subpixelOffset); // Create a canvas with the calculated dimensions //const canvas = document.createElement('canvas'); canvas.width = totalWidth; canvas.height = maxHeight; const ctx = canvas.getContext("2d"); // Set the font size and family, scaled by resolution const font = `${size * resolution}pt ${family}`; ctx.font = font; ctx.fillStyle = fill; // Render each text object onto the canvas // let currentX = 0; // Starting X position textObjects = textObjects.map(textObj => { const { id,textContent, width, height, ascent, descent,left,metrics,offset} = textObj; // Draw the text at the current position ctx.fillText( textContent, offset ?? 0,//currentX + /*Math.abs*/(left), // Offset to align the left edge of the text metrics.hangingBaseline+subpixelOffset // Align the baseline (ascent) of the text ); // Move the X position forward by the width of the text plus the gap // currentX += width + gap; return { id,chunk, textContent,width:Math.round(width/resolution),height:Math.round(height/resolution),offset:Math.round((offset ?? 0)/resolution), ascent: ascent/resolution, descent: descent/resolution // metrics not needed anymore } }); /*const blob = await new Promise(resolve => canvas.toBlob(resolve));*/ /*const blobURL/*OffScreen*//* = await new Promise((keep) => (canvas.convertToBlob || canvas.toBlob).call(canvas).then((blob) => { let link = URL.createObjectURL(blob) keep(link) //return link }))*/ /*const blobURL = await new Promise(function (resolve, reject) { canvas.toBlob((blob) => { let link = URL.createObjectURL(blob); resolve(link); },"image/png"); });*/ // Return the rendered canvas as a Data URL and the corresponding textObjects return { dataURL: canvas.toDataURL("image/png"),chunkWidth: totalWidth/resolution,chunkHeight:maxHeight/resolution, textObjects,// blobURL } }32:T40c,function measureText(textContent, { family = "Arial", size = 10, resolution = 1, canvas = document.createElement('canvas') } = {}) { // Get the canvas context const ctx = canvas.getContext("2d"); // Set the font size and family, scaled by resolution const font = `${size * resolution}pt ${family}`; ctx.font = font; // Measure the text dimensions using advanced text metrics const metrics = ctx.measureText(textContent); // Calculate the actual bounding box dimensions const ascent = Math.ceil(metrics.actualBoundingBoxAscent); const descent = Math.ceil(metrics.actualBoundingBoxDescent); const left = Math.round(metrics.actualBoundingBoxLeft); const right = Math.round(metrics.actualBoundingBoxRight); // Total width and height of the bounding box const width = left + right; const height = ascent + descent // Return the desired output: textContent, width, and height return { textContent, width, height, ascent, descent, left,right, metrics }; }33:T5d5,// For single canvas rendering // Beware: canvas should not exceed maximum canvas size function renderTextToCanvas(textObjects, { gap = 0, // Gap between texts fill = "black", // Default text color family = "Arial", // Default font family size = 10, // Default font size resolution = 1, // Default resolution scaling, canvas = document.createElement('canvas') } = {}) { // Calculate the total width and height for the canvas const totalWidth = textObjects.reduce((sum, textObj) => sum + textObj.width + gap, 0) - gap; const maxHeight = Math.max(...textObjects.map(textObj => textObj.height)); // Create a canvas with the calculated dimensions canvas.width = totalWidth; canvas.height = maxHeight; const ctx = canvas.getContext("2d"); // Set the font size and family, scaled by resolution const font = `${size * resolution}pt ${family}`; ctx.font = font; ctx.fillStyle = fill; // Render each text object onto the canvas let currentX = 0; // Starting X position textObjects.forEach(textObj => { const { textContent, width, height, ascent, left } = textObj; // Draw the text at the current position ctx.fillText( textContent, currentX + Math.abs(left), // Offset to align the left edge of the text ascent // Align the baseline (ascent) of the text ); // Move the X position forward by the width of the text plus the gap currentX += width + gap; }); // Return the rendered canvas return canvas; }34:Ta08,// merge imagedata directly function mergeImageData(characters, kerningTable) { // Step 1: Calculate total width and height let totalWidth = 0; let maxHeight = 0; for (let i = 0; i < characters.length; i++) { const { imageData } = characters[i]; totalWidth += imageData.width; maxHeight = Math.max(maxHeight, imageData.height); if (i > 0) { const prevChar = characters[i - 1].char; const currChar = characters[i].char; const kerning = kerningTable[`${prevChar}${currChar}`] || 0; totalWidth += kerning; } } // Step 2: Create a composite array const compositeData = new Uint8ClampedArray(totalWidth * maxHeight * 4); let offsetX = 0; for (let i = 0; i < characters.length; i++) { const { char, imageData } = characters[i]; const { width, height, data } = imageData; // Apply kerning if (i > 0) { const prevChar = characters[i - 1].char; const kerning = kerningTable[`${prevChar}${char}`] || 0; offsetX += kerning; } // Copy pixel data into the composite array for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const srcIndex = (y * width + x) * 4; const destIndex = ((y * totalWidth) + (offsetX + x)) * 4; // Blend with existing pixels (handle transparency) const srcAlpha = data[srcIndex + 3] / 255; const destAlpha = compositeData[destIndex + 3] / 255; const alpha = srcAlpha + destAlpha * (1 - srcAlpha); if (alpha > 0) { compositeData[destIndex] = ( (data[srcIndex] * srcAlpha + compositeData[destIndex] * destAlpha * (1 - srcAlpha)) / alpha ); compositeData[destIndex + 1] = ( (data[srcIndex + 1] * srcAlpha + compositeData[destIndex + 1] * destAlpha * (1 - srcAlpha)) / alpha ); compositeData[destIndex + 2] = ( (data[srcIndex + 2] * srcAlpha + compositeData[destIndex + 2] * destAlpha * (1 - srcAlpha)) / alpha ); compositeData[destIndex + 3] = alpha * 255; } } } // Move to the next position offsetX += width; } // Step 3: Return the composite ImageData return new ImageData(compositeData, totalWidth, maxHeight); }35:T60d,function splitDataURLIntoCroppedDataURLs(dataURL, offsets) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { const croppedDataURLs = []; // Iterate over each offset and crop the image accordingly offsets.forEach(offset => { const { x, y, width, height } = offset; // Create a canvas element const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // Set canvas dimensions to the cropped size canvas.width = width; canvas.height = height; // Draw the cropped portion of the image onto the canvas ctx.drawImage(img, x, y, width, height, 0, 0, width, height); // Convert the cropped canvas back to a dataURL const croppedDataURL = canvas.toDataURL(); croppedDataURLs.push(croppedDataURL); }); resolve(croppedDataURLs); }; img.onerror = (error) => { reject(`Error loading image: ${error}`); }; // Start loading the image from the dataURL img.src = dataURL; }); } // Example usage: /* const dataURL = 'data:image/png;base64,...'; // Your base64 dataURL here const offsets = [ { x: 0, y: 0, width: 100, height: 100 }, // First crop { x: 50, y: 50, width: 150, height: 150 }, // Second crop ]; splitDataURLIntoCroppedDataURLs(dataURL, offsets) .then(croppedDataURLs => { console.log('Cropped Data URLs:', croppedDataURLs); }) .catch(error => { console.error('Error:', error); });*/36:[] 2d:{"title":"Synchronous Render Text (V2)","cells":[{"id":0,"value":"# Synchronous Render Text (V2)\n## Using Advanced textMetrics","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"texts = Array.from({ length: 861 }, (_, i) => `Text ${i+1} ${Math.random().toString(36).substr(2, 8)}_`);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1320,"value":"test.outerHTML","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1383,"value":"function dataURLtoBlob(dataurl) {\n var arr = dataurl.split(\",\"),\n mime = arr[0].match(/:(.*?);/)[1],\n bstr = atob(arr[1]),\n n = bstr.length,\n u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n return new Blob([u8arr], { type: mime });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"BatchRenderSync = {\n let canvas = document.createElement(\"canvas\");\n\n const options = { family: \"Arial\", size: 16, fill: \"blue\", resolution: 1,canvas,gap:0,maxCanvasWidth:4096};\n\n let t1 = performance.now()\n let chunks = renderTextToCanvasChunks(texts,options)\n\n // invalidation.then(()=>chunks.forEach(chunk=> URL.revokeObjectURL(chunk.blobURL)))\n\n return {\n time: ~~(performance.now()-t1),\n chunks\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n\n","pinned":false,"hidden":false,"mode":"html"},{"id":2066,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":2058,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"canvasSize = (await import(\"https://esm.sh/canvas-size\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"/* canvasLimits = await canvasSize.maxArea({\n max: 18000,\n min: 2048,\n step: 1000,\n // useWorker: true,\n});*/","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}