解决canvas转base64/jpeg时透明区域变成黑色背景的办法

2019-09-08 郑州网站建设  

XML/HTML Code复制内容到剪贴板

<p>Canvas:</p>  

<canvas id="canvas" style="border: 1px solid #ccc;"></canvas>  

<br>  

<p>Base64转码后的图片:</p>  

<div id="base64Img"></div>  

  

<script type="text/javascript">  

    var base64Img = document.getElementById("base64Img"),   

        canvas = document.getElementById("canvas"),   

        context = canvas.getContext("2d");   

  

    // 创建新图片   

    var img = new Image();   

    img.src = "1.png";   

  

    img.addEventListener("load", function() {   

        // 绘制图片到canvas上   

        canvas.width = img.width;   

        canvas.height = img.height;   

  

        context.drawImage(img, 0, 0);   

  

        getBase64(canvas, function(dataUrl) {   

            // 展示base64位的图片   

            var newImg = document.createElement("img");   

                newImg.src = dataUrl;   

  

            base64Img.appendChild(newImg);   

        });   

    }, false);   

  

    // 获取canvas的base64图片的data网址(图片格式为image/jpeg)   

    function getBase64(canvas, callback) {   

        var data网址 = canvas.toData网址("image/jpeg");   

  

        if(typeof callback !== undefined) {   

            callback(data网址);   

        }   

    }   

</script>  

效果如下:

解决canvas转base64/jpeg时透明区域变成黑色背景的方案

为什么canvas会png的透明区域转成黑色呢?

canvas转换成jpeg之前移除alpha通道,所以透明区域被填充成了黑色。

但是,我们希望的是,canvas可以将png的透明区域填充成白色。

那么如何将canvas中的透明区域填充成白色呢?

以下是我实践过的两种解决方法,希望对你有帮助。

解决方法一:将透明的pixel设成白色

因为png图片的背景都是透明的,所以我们可以寻找透明的pixel,然后将其全部设置成白色,核心代码如下:

JavaScript Code复制内容到剪贴板

// 将canvas的透明背景设置成白色   

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);   

for(var i = 0; i < imageData.data.length; i += 4) {   

    // 当该像素是透明的,则设置成白色   

    if(imageData.data[i + 3] == 0) {   

        imageData.data[i] = 255;   

        imageData.data[i + 1] = 255;   

        imageData.data[i + 2] = 255;   

        imageData.data[i + 3] = 255;    

    }   

}   

context.putImageData(imageData, 0, 0);  

完整代码如下:

XML/HTML Code复制内容到剪贴板

<p>Canvas:</p>  


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1354.html转载请标明出处,谢谢合作!
标签:
  • 如下
  • 代码
  • canvasbase64
  • XML/