vue-html2canvas实现缩略图

准备工作：

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();
}