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

【问题标题】：Javascript canvas - remove alpha from a loaded 4 bands RGB image to 3 bands JPEG image?Javascript 画布 - 从加载的 4 波段 RGB 图像中删除 alpha 到 3 波段 JPEG 图像？
【发布时间】：2019-12-17 09:21:48
【问题描述】：

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

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

<p>Canvas:</p>
<canvas id="myCanvas" width="2400" height="2097" 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);
}

【问题讨论】：

标签： javascript html canvas png draw

【解决方案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;
        }

【讨论】：