web前端js

前端获取粘贴板图片点击按钮提交base64数据到后台

bindPaste();
//绑定粘贴事件
var base64_str = null;

function bindPaste() {
	//定义变量存储获取的图片内容
	var blob;
	//获取body对象
	var body = document.getElementsByTagName("body");
	//定义body标签绑定的粘贴事件处理函数
	var fun = function(e) {
		//获取clipboardData对象
		var data = e.clipboardData || window.clipboardData;
		//获取图片内容
		blob = data.items[0].getAsFile();
		//判断是不是图片，最好通过文件类型判断
		var isImg = (blob && 1) || -1;
		var reader = new FileReader();
		//文件读取完成时触发
		reader.onload = (function() {
			return function(e) {
				console.log("获得粘贴的结果", e.target.result);
				base64_str = e.target.result;
				//div中的img标签src属性赋值，可以直接展示图片
				$("#screenShoot").attr("src", base64_str);
				//显示div
				$("#screenShoot").css("display", "block");
			}
		})();
		if (isImg >= 0) {
			//将文件读取为 DataURL
			reader.readAsDataURL(blob);
		}
	}
	//通过body标签绑定粘贴事件，注意有些标签绑定粘贴事件可能出错
	body[0].removeEventListener('paste', fun);
	body[0].addEventListener('paste', fun);
}
$("#sendBtn").on("click", function() {
	$.ajax({
		type: 'get',
		url: conf.global_url + "/device/saveToImgByStr",
		data: {
			base64Str: base64_str,
		},
		cache: false,
		async: false,
		dataType: 'json',
		contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
		success: function(result) {
			console.log("result" + result);
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			console.log('系统异常！');
		}
	})
})

后台获取base64数据转换图片并保存

//springboot 跨域注解
    @CrossOrigin(origins = "*")
    @PostMapping("/saveToImgByStr")
    public String saveToImgByStr(HttpServletRequest request, HttpServletResponse response, String base64Str) throws IOException {
        String destDir = "/upload/image";
        //非springboot项目 可设置请求头解决跨域问题
//        response.setHeader("Access-Control-Allow-Origin", "*");
        base64Str = base64Str.replaceAll("data:image/png;base64,", "");
        BASE64Decoder decoder = new BASE64Decoder();
        byte[] imageByte = null;
        try {
            imageByte = decoder.decodeBuffer(base64Str);
            for (int i = 0; i < imageByte.length; ++i) {
                if (imageByte[i] < 0) {// 调整异常数据
                    imageByte[i] += 256;
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        if (imageByte.length > 0) {
            try {
                //获取文件上传的真实路径
//                String uploadPath = request.getSession().getServletContext().getRealPath("/");
                //保存文件的路径
                String filepath = destDir + File.separator + createNewDir();
                File destfile = new File("D:" + filepath);
                if (!destfile.exists()) {
                    destfile.mkdirs();
                }
                //文件新名称
                String fileNameNew = getFileNameNew() + ".png";
                File f = new File(destfile.getAbsoluteFile() + File.separator + fileNameNew);
                // 将字符串转换成二进制，用于显示图片
                // 将上面生成的图片格式字符串 imgStr，还原成图片显示
                InputStream in = new ByteArrayInputStream(imageByte);
                FileOutputStream fos = new FileOutputStream(f);
                // BufferedOutputStream bos = new BufferedOutputStream(fos);
                byte[] buf = new byte[1024];
                int length;
                length = in.read(buf, 0, buf.length);

                while (length != -1) {
                    fos.write(buf, 0, length);
                    length = in.read(buf);
                }
                fos.flush();
                fos.close();
                in.close();
                String lastpath = filepath + File.separator + fileNameNew;
                LOGGER.info("返回图片路径：" + lastpath);;
                return lastpath;

            } catch (Exception e) {
                e.printStackTrace();
            } finally {
            }
        }
        return null;
    }