geoWarp = function*(targetProjection, image, context) { if (!image || !image.complete) return; const w = context.canvas.width; const h = context.canvas.height; const sw = image.naturalWidth || image.width; const sh = image.naturalHeight || image.height; const srcCanvas = document.createElement("canvas"); srcCanvas.width = sw; srcCanvas.height = sh; const srcCtx = srcCanvas.getContext("2d"); srcCtx.drawImage(image, 0, 0); const srcData = srcCtx.getImageData(0, 0, sw, sh).data; // Offscreen target buffer to allow proper context clipping const targetCanvas = document.createElement("canvas"); targetCanvas.width = w; targetCanvas.height = h; const targetCtx = targetCanvas.getContext("2d"); const output = targetCtx.createImageData(w, h); const outData = output.data; const step = 1; for (let y = 0; y < h; y += step) { for (let x = 0; x < w; x += step) { const lonlat = targetProjection.invert([x, y]); if (!lonlat || !Number.isFinite(lonlat[0]) || !Number.isFinite(lonlat[1])) { continue; } const lon = lonlat[0]; const lat = lonlat[1]; if (lon < -180 || lon > 180 || lat < -90 || lat > 90) { continue; } const sx = Math.floor(((lon + 180) / 360) * sw); const sy = Math.floor(((90 - lat) / 180) * sh); if (sx >= 0 && sx < sw && sy >= 0 && sy < sh) { const srcIdx = (sy * sw + sx) * 4; for (let dy = 0; dy < step && y + dy < h; dy++) { for (let dx = 0; dx < step && x + dx < w; dx++) { const outIdx = ((y + dy) * w + (x + dx)) * 4; outData[outIdx] = srcData[srcIdx]; outData[outIdx + 1] = srcData[srcIdx + 1]; outData[outIdx + 2] = srcData[srcIdx + 2]; outData[outIdx + 3] = srcData[srcIdx + 3]; } } } } if (y % 16 === 0) { targetCtx.putImageData(output, 0, 0); yield targetCanvas; } } targetCtx.putImageData(output, 0, 0); yield targetCanvas; }