Javascript 画布 - 从加载的 4 波段 RGB 图像中删除 alpha 到 3 波段 JPEG 图像？

Posted 2023-03-28

【中文标题】Javascript 画布 - 从加载的 4 波段 RGB 图像中删除 alpha 到 3 波段 JPEG 图像？

【英文标题】：Javascript canvas - remove alpha from a loaded 4 bands RGB image to 3 bands JPEG image?

【发布时间】：2019-12-17 09:21:48

【问题描述】：

我有一张从服务器加载的图像，其中包含 4 个 RGB 格式的波段。由于 alpha 波段导致图像看起来透明，所以我需要裁剪这个 alpha 波段并将其保存为 JPEG 格式。我能想到的一种方法是使用画布，但是，我不确定它是否可能，因为我所做的测试表明图像是相同的。

<p>Image to use:</p>
<img id="scream" src="data/with_alpha.png" >

<p>Canvas:</p>
<canvas id="myCanvas"   style="border:1px solid #d3d3d3;">
</canvas>


window.onload = function() 
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.globalAlpha = 1;
  var img = document.getElementById("scream");
  ctx.drawImage(img, 0, 0);
  // This ones does not do anything to remove the alpha band
  c.toDataURL("image/jpeg", 0.0);

【参考方案1】：

我从http://sunbox.github.io/image-to-canvas-to-image/找到了答案，将画布转换为图像可以是这样的：

        // Get the image
        var sampleImage = document.getElementById("ringoImage"),
            canvas = convertImageToCanvas(sampleImage),
            image = convertCanvasToImage(canvas);  


        // Actions
        document.getElementById("pngHolder").appendChild(image);

        // Converts image to canvas; returns new canvas element
        function convertImageToCanvas(image) 
        var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0);

            return canvas;
        

        // Converts canvas to an image
        function convertCanvasToImage(canvas) 
            var image = new Image();
            image.src = canvas.toDataURL("image/jpeg");
            return image;