如何將數組中的圖像數據插入 canvas 以便下載？

Question

我正在制作一個用於繪制像素藝術的 web 應用程序。 該應用程序本身可以工作，我可以選擇 canvas 大小，colors 和工具來繪制。 現在我想從中生成一個圖像。 我的 canvas 是一個 div 網格，當你在它們上繪圖時會改變背景顏色。 我制作了一個 function，它創建了一個 2D 數組，每個項目都有 4 個值（紅色、綠色、藍色、alpha）。 這是我使用的 function：

function rgb2pngStart(val) {
    let finish = val.length - 1;
    let sliced = val.slice(4, finish)
    let stringAr = sliced.split(', ');
    let R = parseInt(stringAr[0]);
    let G = parseInt(stringAr[1]);
    let B = parseInt(stringAr[2]);
    let pixelArray = [R, G, B, 255];
    return pixelArray;
}

function createArray() {
    let sideInPixels = document.documentElement.style.getPropertyValue('--number');
    let canvasX = [];
    let canvasY = [];
    for (let i = 1; i <= sideInPixels; i++) {
        for (let j = 1; j <= sideInPixels; j++) {
            let pixel = document.getElementById(i + ' ' + j).style.backgroundColor;
            canvasX[j - 1] = rgb2pngStart(pixel);
        }
        canvasY[i - 1] = canvasX;
    }
    return canvasY; 
}

我試圖創建一個 canvas，在這里使用一些舊答案，並將我的數據放入 imagedata，然后將該圖像顯示給用戶，以便他可以下載它。 但我不知道我該怎么做...

那么，如何從這個數組生成圖像呢？ 或者我應該改變什么才能讓它工作？

Answer 1

最方便的方法是使用實際的<canvas>元素：您可以從 RGBA 像素信息創建ImageData並將其放入canvas 上下文中- 然后生成數據 URL或blob ，可用於創建 URL 或 blob ，可用於創建Z4496668CFFDE69ACCBD URL （兩者都可以作為下載目標）。