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

  
    // 创建新图片   
    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);   
  
        // 将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);   
  
        // 展示base64位的图片   
        getBase64(canvas, function(dataUrl) {   
            var newImg = document.createElement("img");   
                newImg.src = dataUrl;   
  
            base64Img.appendChild(newImg);