前端代码JS: 前端图片为canvsa绘图转base64格式

function putTextInfo() {
var canvasImg = painting.canvas.toDataURL('image/png', 0.8).substring(22); // canvas图片.草图
var cName = $("#username").val();//客户姓名
var provinceid = $("#provice").val();//客户地址,省id
var cityid = $("#city").val();//客户地址,市id
var countyid = $("#county").val();//客户地址,县id
var townid = $("#town").val();//客户地址,镇id
var villageid = $("#village").val();//客户地址,村id
var cAddress = $('.detailAddress').val();//详细地址
var shopName = $('.shopname').val();//店铺名称
var cTell = $('.phonenum').val();//联系电话
var weiXin = $('.wxnum').val();//微信号码
var remarks = $('.remark').val();//备注信息
var idCard = $('.idnum').val();//身份证号
var layerhight = $('.layerh').val();//层高
var beamunder = $('.ldown').val();//梁下
var beanover = $('.lup').val();//梁上
var officecolor = $('.officeColor').val();//办公区色系
var lovelycolor = $('.beautyColor').val();//美容区色系
var machinecolor = $('.machineColor').val();//机修区色系
var officelight = $('.officeModelling').val();//办公区灯光造型
var lovelylight = $('.beautyModelling').val();//美容区灯光造型
var machinelight = $('.machineModelling').val();//机修区灯光造型
var sign = $('.sign').val();//招牌
var yesorBasement = $(":radio[name=yesorBasement]:checked").val();//是否有地下室,1有/2无
var yesorGas = $(":radio[name=yesorGas]:checked").val();//是否有水管或煤气管道:1有2没有
var dtId = $("#color-select").val();//汽保店类型
var length = $('.length').val();//场地长度
var width = $('.width').val();//场地宽度
var otherinfo = $('.width').val();//其他要求
$.ajax({
type: "POST",//请求类型
url: path+"/draw/putSketch",//请求的url
data:{canvasImg:canvasImg,cName:cName,provinceid:provinceid,cityid:cityid,countyid:countyid,townid:townid,villageid:villageid,cAddress:cAddress,shopName:shopName,cTell:cTell,weiXin:weiXin,remarks:remarks,idCard:idCard,layerhight:layerhight,beamunder:beamunder,beanover:beanover,officecolor:officecolor,lovelycolor:lovelycolor,machinecolor:machinecolor,officelight:officelight,lovelylight:lovelylight,machinelight:machinelight,sign:sign,yesorBasement:yesorBasement,yesorGas:yesorGas,dtId:dtId,length:length,width:width,otherinfo:otherinfo},//请求参数
dataType: "json",//ajax接口(请求url)返回的数据类型
async : false, //同步方式
success: function (data) {//data:返回数据(json对象)
if(data.message=="error"){
errerInformation(data.data);
}
if(data.message=="style"){
errerInformation(data.data,path+"/draw/matchDesignSketch");
}
if(data.message=="noStyle"){
errerInformation("请选择装修风格!",path+"/decorationStyle/styleList");
}
}
});
}
后台代码:
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
import java.io.*; /**
* @Auther: lanhaifeng
* @Date: 2018/9/20 0020 16:07
* @Description:base64,图片互转工具类
*/
public class Base64ConvertImageUtil { /**
* base64字符串转化成图片
* 对字节数组字符串进行Base64解码并生成图片
* @param imgStr base64字符码
* @param folderName 文件类型文件夹名
* @param subfolderName 文件类型子文件名,注意前缀要+“/”
* @param fileName 文件名称,注意前缀要加“/”
* @return
*/
public static String GenerateImage(String imgStr,String folderName,String subfolderName, String fileName) {
String result=null;
if (imgStr != null && !("").equals(imgStr) ) {
//解决后台接收base64编码出现空格的问题,核心问题
String sst = imgStr.replace(" ", "+");
byte[] b;
try {
b = new BASE64Decoder().decodeBuffer(sst);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
// 调整异常数据
b[i] += 256;
}
}
String savePath = FolderPathUtil.SAVE_DATABASE_PATH + folderName + subfolderName + "/" + fileName;//数据库保存文件路径
//生成png图片路径
String realPath = FolderPathUtil.ABSOLUTE_PATH + FolderPathUtil.SAVE_DATABASE_PATH + folderName + subfolderName;//文件物理保存路径
File file=new File(realPath);
if(!file.exists()){
file.mkdirs();
}
OutputStream os = new FileOutputStream(realPath+"/"+fileName);
os.write(b);
os.flush();
os.close();
result = savePath;//成功返回路径
} catch (IOException e2) {
e2.printStackTrace();
}
}
return result;
} /**
* 图片转化成base64字符串
* @param imgFile 待处理的图片全路径,注意实际路径要加:E:/images/
* @return
*/
public static String GetImageStr(String imgFile) {
imgFile="E:/images/"+imgFile;//物理储存路径=物理盘符+数据库存储路径
InputStream in = null;
byte[] data = null;
//读取图片字节数组
try {
in = new FileInputStream(imgFile);
data = new byte[in.available()];
in.read(data);
in.close();
}
catch (IOException e) {
e.printStackTrace();
}
//对字节数组Base64编码
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(data);//返回Base64编码过的字节数组字符串
} } controller层接收用字符串
@RequestParam(required=false,value = "canvasImg") String canvasImg
												

base64转换成图片的更多相关文章

  1. PHP base64转换成图片

    获取base64文件 $image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASIAAAEiCAYAAABdvt+2AAAgAElEQV ...

  2. js怎么将 base64转换成图片

    //获取数组最后一个元素 let hasFiles = files[Object.keys(files).pop()] // 参考上面的图片 let file = hasFiles.url let n ...

  3. 使用的是html5的canvas将文字转换成图片

    当前功能的运用场景是:用户需要传文件给他人,在用户选择文件之后需要显示一个文件图标和所选文件的名称. 当前代码部分是摘自网上,但是已经忘记在什么地方获取的,如有侵权联系小弟后自当删除. 注意:必须在h ...

  4. C#技术分享【PDF转换成图片——13种方案】(2013-07-25重新整理)

    原文:C#技术分享[PDF转换成图片--13种方案](2013-07-25重新整理) 重要说明:本博已迁移到 石佳劼的博客,有疑问请到 文章新地址 留言!!! 写在最前面:为了节约大家时间,撸主把最常 ...

  5. C#技术分享【PDF转换成图片——11种方案】

    1.[iTextSharp.dll],C# 开源PDF处理工具,可以任意操作PDF,并可以提取PDF中的文字和图片,但不能直接将PDF转换成图片. DLL和源码 下载地址:http://downloa ...

  6. 批量将网页转换成图片或PDF文档技巧分享

    工作中我们有时要将一些批量的网页转换成图片或者PDF文档格式,尽管多数浏览器具有滚动截屏或者打印输出PDF文档功能.可是假设有几十上百张网页须要处理,那也是要人命的.所以我一直想找一款可以批量处理该工 ...

  7. WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片

    原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...

  8. Gson字符串编码,字符串转换成图片保存,二进制转换成图片保存

    import java.io.BufferedInputStream; import java.io.ByteArrayInputStream; import java.io.File; import ...

  9. Android View转换成图片保存

    package zhangphil.viewtoimage; import java.io.File;import java.io.FileOutputStream; import android.o ...

随机推荐

  1. python中raise的用法

    有关于python里raise显示引发异常的方法: 当程序出错时,python会自动触发异常,也可以通过raise显示引发异常 一旦执行了raise语句,raise之后的语句不在执行 如果加入了try ...

  2. Golden Eggs HDU - 3820(最小割)

    Golden Eggs Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  3. 爬虫_电影天堂 热映电影(xpath)

    写了一天才写了不到100行.不过总归是按自己的思路完成了 import requests from lxml import etree import time BASE = 'http://www.d ...

  4. 【BZOJ5213】[ZJOI2018]迷宫(神仙题)

    [BZOJ5213][ZJOI2018]迷宫(神仙题) 题面 BZOJ 洛谷 题解 首先可以很容易的得到一个\(K\)个点的答案. 构建\(K\)个点分别表示\(mod\ K\)的余数.那么点\(i\ ...

  5. Codeforces | CF1029D 【Concatenated Multiples】

    \(qwq\)昨天晚上\(Div.3\)过了这道题...早上交了\(1A\)...看在\(CF\)上\(hack\)的情况并不乐观而且也没人来交这题的份上...我决定发一篇题解帮\((zhuang)\ ...

  6. ⌈洛谷4735⌋⌈BZOJ3261⌋最大异或和【可持久化01Trie】

    题目链接 [BZOJ传送门] [洛谷传送门] 题解 终于学会了可持久化trie树了.感觉并不是特别的难. 因为可持久化,那么我们就考虑动态开点的trie树. 都知道异或操作是有传递性的,那么我们就维护 ...

  7. Dynamic CRM 2015学习笔记(1)Azure 上安装 CRM 2015

    今天终于在Azure上安装成功了CRM 2015,下面简单介绍下安装过程,以及出现问题的解决: 一. 配置AD, 安装IIS 参考下面的link,里面有详细的配置步骤 http://www.c-sha ...

  8. html概述和基本结构

    html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签 ...

  9. cf1000F One Occurrence (线段树)

    这题我是离线做的 设i位置的数上次出现的位置是pre[i](如果第一次出现那就是0) 可以想到,用线段树维护一个区间的pre的最小值,如果它小于区间左端点,那这个数就是一个合法的答案 但直接这样做是错 ...

  10. CDQ分治与整体二分学习笔记

     CDQ分治部分 CDQ分治是用分治的方法解决一系列类似偏序问题的分治方法,一般可以用KD-tree.树套树或权值线段树代替. 三维偏序,是一种类似LIS的东西,但是LIS的关键字只有两个,数组下标和 ...