博客

最近做一个生成图片的项目，用到html2canvas可以将需要生成图片的html内容完美生成图片，但是向后台传递数据的时候，就不美好了。html2canvas生成图片时，html内容复杂生成的base64数据是很大的，后台根本接收不到。然后我将canvas数据由base64变成了blob;

话不多说，直接上代码。

			html2canvas(document.getElementById('img')).then(canvas=>{
			    var imgurl = canvas.toBlob((blob)=>{
			      	//以时间戳作为文件名 实时区分不同文件 按需求自己定义就好
                    let filename = `${new Date().getTime()}.jpg`;
                  	//转换canvas图片数据格式为formData
                    let file2 = new File([blob], filename, {type: 'image/jpg'});
                    let formData = new FormData();
                    formData.append('file', file2);
                    //将转换为formData的canvas图片 上传到服务器
                    this.axios.post('后台接口地址',formData).then(res=>{
                     //图片上传成功之后，再调用对应的其他接口，传递指定的参数
	                    if(res.data.state == 200){
	                        this.axios.post('后台接口地址',{
	                        	img:res.data.data,
	                        	type:0
	                        }).then(res=>{
	                            console.log(res);
	                        })
	                    }
                    })
			    })
		    });

好了，继续撸代码了。