代码如下：

XML/HTML代码复制内容到剪贴板

pCanvas:/p

canvasid=' canvasid ' style=' border :1 pxsolid # CCC；/canvas

英国铁路公司

pBase64转码后的图片：/p

divid='base64Img'/div

scripttype='text/javascript '

var base 64 IMg=文档。GetElementBYid(' base 64 IMg ')，

canvas=文档。getelementbyid(' canvas ')，

上下文=画布。GetContext(' 2d ')；

//创建新图片

variamg=Newimage()；

img。src=' 1。png '；

img.addEventListener('load '，function(){

//绘制图片到帆布上

帆布。width=img。宽度；

帆布。高度=img。身高；

context.drawImage(img，0，0)；

getBase64(canvas，function(dataUrl){

//展示base64位的图片

varnewmg=文档。create ElEMENT(' img ')；

新IMg。src=DataURL

base64 img。appendchild(新img)；

});

}，false)；

//获取帆布的base64图片的dataURL(图片格式为图像/jpeg)

functiongetBase64(canvas，callback){

vardataURL=canvas。TotaToul(' image/JPEG ')；

if(typeofcallback！==未定义){

回调(DataURL)；

}

}

/script

效果如下：

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

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

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

那么怎么将帆布中的透明区域填充成白色呢？

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

解决方案一：将透明的pixel设成白色

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

Java Script语言代码复制内容到剪贴板

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

varimageData=上下文。getimagedata(0，0，canvas.width，canvas。身高)；

for(vari=0；图像数据。数据。长度；i=4){

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

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

imagedata。数据[I]=255；

imagedata。数据[I 1]=255；

imagedata。数据[I ^ 2]=255；

imagedata。数据[I ^ 3]=255；

}

}

context.putImageData(imageData，0，0)；

完整代码如下：

XML/HTML代码复制内容到剪贴板

pCanvas:/p

canvasid=' canvasid ' style=' border :1 pxsolid # CCC；/canvas

英国铁路公司

pBase64转码后的图片：/p

divid='base64Img'/div

scripttype='text/javascript '

var base 64 IMg=文档。GetElementBYid(' base 64 IMg ')，

canvas=文档。getelementbyid(' canvas ')，

上下文=画布。GetContext(' 2d ')；

//创建新图片

variamg=Newimage()；

img。src=' 1。png '；

img.addEventListener('load '，function(){

//绘制图片到帆布上

帆布。width=img。宽度；

帆布。高度=img。身高；

context.drawImage(img，0，0)；

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

varimageData=上下文。getimagedata(0，0，canvas.width，canvas。身高)；

for(vari=0；图像数据。数据。长度；i=4){

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

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

imagedata。数据[I]=255；

imagedata。数据[I 1]=255；

imagedata。数据[I ^ 2]=255；

imagedata。数据[I ^ 3]=255；

}

}

context.putImageData(imageData，0，0)；

//展示base64位的图片

getBase64(canvas，function(dataUrl){

varnewmg=文档。create ElEMENT(' img ')；

新IMg。src=DataURL

base64 img。appendchild(新img)；

});

}，false)；

//获取帆布的base64图片的dataURL(图片格式为图像/jpeg)

functiongetBase64(canvas，callback){

vardataURL=canvas。TotaToul(' image/JPEG ')；

if(typeofcallback！==未定义){

回调(DataURL)；

}

}

/script

效果如下：

缺点显而易见。当png图片上存在半透明区域时，会将其填充为黑色。这是我们不希望的。

解决方案二：在canvas绘制前填充白色背景

核心代码如下：

Java Script语言代码复制内容到剪贴板

//在帆布绘制前填充白色背景

context.fillStyle=' # fff

context.fillRect(0，0，canvas.width，canvas。身高)；

完整代码如下：

XML/HTML代码复制内容到剪贴板

pCanvas:/p

canvasid=' canvasid ' style=' border :1 pxsolid # CCC；/canvas

英国铁路公司

pBase64转码后的图片：/p

divid='base64Img'/div

scripttype='text/javascript '

var base 64 IMg=文档。GetElementBYid(' base 64 IMg ')，

canvas=文档。getelementbyid(' canvas ')，

上下文=画布。GetContext(' 2d ')；

//创建新图片

variamg=Newimage()；

img。src=' 1。png '；

img.addEventListener('load '，function(){

//绘制图片到帆布上

帆布。width=img。宽度；

帆布。高度=img。身高；

//在帆布绘制前填充白色背景

context.fillStyle=' # fff

context.fillRect(0，0，canvas.width，canvas。身高)；

context.drawImage(img，0，0)；

//展示base64位的图片

getBase64(canvas，function(dataUrl){

varnewmg=文档。create ElEMENT(' img ')；

新IMg。src=DataURL

base64 img。appendchild(新img)；

});

}，false)；

//获取帆布的base64图片的dataURL(图片格式为图像/jpeg)

functiongetBase64(canvas，callback){

vardataURL=canvas。TotaToul(' image/JPEG ')；

if(typeofcallback！==未定义){

回调(DataURL)；

}

}

/script

效果如下：

完美！

显然，在帆布绘制前填充白色背景这种方法，不仅简单，而且对png图片的半透明区域填充难看的黑色块。推荐这种解决方案。

另：canvas.toDataURL()方法不允许处理跨域图片。否则会报错。