HTML转Canvas工具 前端生成图片工具 屏幕快照 html2canvas 下载 或上传至服务器 使用方法

HTML转Canvas工具 前端生成图片工具
屏幕快照 html2canvas 下载 或上传至服务器 使用方法

 <!-- 如果需要显示照片-->
  <!-- <img :src="htmlUrl"> -->

<div class="app-container " ref="imageTofile" >
 <!-- 会把这一部分的图截下来 用ref 指引 -->
</div>

<button @click="toImage()">提交</button>

data() {
		return {
		   htmlUrl:''
		}

methods: {
//方法1
		 base64ToBlob (code) {
		                let parts = code.split(';base64,');
		                let contentType = parts[0].split(':')[1];
		                let raw = window.atob(parts[1]);
		                let rawLength = raw.length;
		                let uInt8Array = new Uint8Array(rawLength);
		                for (let i = 0; i < rawLength; ++i) {
		                    uInt8Array[i] = raw.charCodeAt(i);
		                }
		                return new window.Blob([uInt8Array], {type: contentType, name: 'file_' + new Date().getTime() + '.jpg'});
		        },
		        //方法2:
		        　toImage() {
					        var self = this;
					　　　　// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
					　　　　html2canvas(this.$refs.imageTofile, {
					　　　　　　backgroundColor: null
					　　　　}).then((canvas) => {
					　　　　　　let dataurl = canvas.toDataURL('image/png');
					            console.log(dataurl)
					              self.htmlUrl = dataurl
					               //以下代码为下载此图片功能
					            //  var triggerDownload = $("<a>").attr("href", dataurl).attr("download", "ceshi.png").appendTo("body");
					            //    triggerDownload[0].click();
					            //    triggerDownload.remove();
					　　　　　　// 把生成的base64位图片上传到服务器,生成在线图片地址
		
					            let blob = self.base64ToBlob(dataurl);
					            //后台如果不接收base64 就转为file传参
					            let fileOfBlob = new File([blob],'截图.jpg'); // 重命名了
					            console.log('是file文件吗?')
					            console.log(fileOfBlob)
					            let jietufile = {
					                raw:fileOfBlob
					            }
					            self.uploadFileStatus = true;
					            self.fileList.push(jietufile)
					            // console.log(self.fileList)
					            //　//调用接口
					            self.saveSupport()
			　　　　})
			　　},
			　　//调用接口
　　saveSupport() {
		      var self = this;
		        var formData = new FormData();
		        formData.append("opinionContent", self.content);
		        if (self.uploadFileStatus && self.fileList.length > 0) {
			          for (var i = 0; i < self.fileList.length; i++) {
				            if (self.fileList[i].raw) {
				              formData.append("uploadFiles", self.fileList[i].raw);
				            }
			          }
		        }
		              
		        html2canvasDemo.saveOpinion(formData).then(res => {
			          if (res && res.code == 200) {
			            self.$message({
			              showClose: true,
			              message: '提交成功',
			              type: 'success',
			              duration: 8000,
			            });
			          } else {
			            self.$message.error('提交失败');
			          }
		        })
			},
	},

}