前端项目引入html2canvas,vue-html2canvas实现缩略图

准备工作：

npm install --save html2canvas

在需要的组件中引入

import html2canvas from "html2canvas"

需要生成的图片所在的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数据 提交给后端数据库中 使用时 直接

前端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();

}

vue-html2canvas实现缩略图