vue-html2canvas实现缩略图

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