Q:前端canvas标签的内容传递到后台保存为图片时出现无法正常显示的问题

本文介绍了一种解决通过Base64编码的图像数据在转换为PNG图片时出现显示错误的方法。主要原因是解码过程中部分字符被错误替换,通过修正此问题可以确保图片正确显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题:

在通过前端的canvas标签,将其中的图像内容通过toDataURL()方法(其对应的元素的对象调用toDataURL方法)将其内容进行base64编码为字符串之后传到后台,后台在接收到相应的字符串之后,对其进行解码,同时保存为png格式的图片,发现保存的图片无法正确的进行显示。

解决方法:

在后台,解码之后的内容,其+”符号被替换为了空格,为此,应当将空格替换为“+”之后再写入文件中,图片才能正确的进行显示


相应的后台的代码(java)

/**

 * ajax传递过来的base64编码的数据进行解码将其保存png图片

 * @param picture 图片所对应的base64编码的字符串

 *

 */

public void decode(String picture)

{

byte[] bt=null;

int index=picture.indexOf(",");

picture=picture.substring(index+1,picture.length());//在于去掉首部的非图片的内容的字符串

picture=picture.replaceAll(" ", "+");//关键的语句,当其不将空格转化为"+"时,其解析为png图片时,会出现图片内容无法正确显示的情况

//import sun.misc.BASE64Decoder;

BASE64Decoder decoder=new BASE64Decoder();

try 

{

bt=decoder.decodeBuffer(picture);

}

catch (IOException e)

{

e.printStackTrace();

}

try 

{

OutputStream op=new FileOutputStream(new File(url+pictureName+extendName));

op=new BufferedOutputStream(op);

try

{

op.write(bt);

op.flush();

op.close();

} catch (IOException e)

{

e.printStackTrace();

}

}

catch (FileNotFoundException e)

{

e.printStackTrace();

}

}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值