标签：default try scale use ios wim request params 代码
准备工作：
npm install --save html2canvas
在需要的组件中引入
import html2canvas from "html2canvas"
需要生成的图片所在的div 要添加<div ref="imageWrapper">.... </div>
方法一：生成blob文件 提交给后端 前端显示的时候显示图片的路径
前端methods里添加
html2canvas(this.$refs.imageWrapper,{
scale:0.25, // 按比例放大或缩小
// dpi: 900, // 处理模糊问题
// foreignObjectRendering: true,// 是否尝试使用CORS从服务器加载图像
useCORS: true,// 是否尝试使用CORS从服务器加载图像
// async: false, // 是否异步解析和呈现元素
background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的，
}).then(canvas => {
const dataUrl = canvas.toDataURL(‘images/jpg‘)
var fd = new FormData()
var blob = this.dataURItoBlob(dataUrl)
fd.append(‘file‘, blob, Date.now() + ‘.png‘)
addView1(fd).then(res => { //这里要注意
if (res.data.code === 200) {
this.$message.success("保存成功!")
} else {
this.$message.error(res.data.message)
}
})
})，dataURLtoBlob(dataurl) {
// base64转blob
var arr = dataurl.split(‘,‘);
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
service里写
export async function addView1(viewImg) {
return request(VIEW_ADD1,METHOD.POST,viewImg,{type:‘multipart/form-data‘}) //注意这里提交的是图片文件
}
request.js里
async function request(url, method, params, config) {
switch (method) {
case METHOD.GET: {
return axios.get(url, {params, ...config})
}
case METHOD.POST: {
if (config != undefined && config.type != undefined && config.type === ‘form-data‘) {
const formData = new FormData();
Object.keys(params).forEach((key) => {
formData.append(key, params[key]);
});
return axios.post(url, formData, config)
}
return axios.post(url, params, config)
}
default:
return axios.get(url, {params, ...config})
}
}
后端代码
@PostMapping("add1")
public NtasResponse test(@RequestParam("file") MultipartFile file) {
System.out.println(file);
String fileName = file.getOriginalFilename();
if(fileName.indexOf("\\") != -1){
fileName = fileName.substring(fileName.lastIndexOf("\\"));
}
String filePath = "src/main/resources/static/files/";
File targetFile = new File(filePath);
if(!targetFile.exists()){
targetFile.mkdirs();
}
FileOutputStream out = null;
try {
out = new FileOutputStream(filePath+fileName);
out.write(file.getBytes());
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
return new NtasResponse().success();
}
方法二：生成base64数据 提交给后端数据库中 使用时 直接<img src="base64data" />
前端methods里添加
html2canvas(this.$refs.imageWrapper,{
scale:0.25, // 按比例放大或缩小
// dpi: 900, // 处理模糊问题
// foreignObjectRendering: true,// 是否尝试使用CORS从服务器加载图像
useCORS: true,// 是否尝试使用CORS从服务器加载图像
// async: false, // 是否异步解析和呈现元素
background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的， null为透明
}).then(canvas => {
const dataUrl = canvas.toDataURL(‘images/jpg‘)
var img = {
file:dataUrl
}
addView1(img).then(res => { //这里要注意提交时异步的 如果要向后端传值 则在then中发送请求
if (res.data.code === 200) {
this.$message.success("保存成功!")
} else {
this.$message.error(res.data.message)
}
})
})
service里写
export async function addView1(viewImg) {
return request(VIEW_ADD1,METHOD.POST,viewImg,{type:‘form-data‘})
}
request.js里
async function request(url, method, params, config) {
switch (method) {
case METHOD.GET: {
return axios.get(url, {params, ...config})
}
case METHOD.POST: {
if (config != undefined && config.type != undefined && config.type === ‘form-data‘) {
const formData = new FormData();
Object.keys(params).forEach((key) => {
formData.append(key, params[key]);
});
return axios.post(url, formData, config)
}
return axios.post(url, params, config)
}
default:
return axios.get(url, {params, ...config})
}
}
后端代码
@PostMapping("add1")
public Response test(String file) {
System.out.println(file);
return new Response().success();
}
标签：default try scale use ios wim request params 代码
原文地址：https://www.cnblogs.com/YinXuanZhiZhi9/p/14694186.html
