mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-10 16:16:45 +08:00
更换贺报下载的方法2
This commit is contained in:
@@ -222,43 +222,21 @@ export default {
|
|||||||
captureAndProcessImage();
|
captureAndProcessImage();
|
||||||
},
|
},
|
||||||
downloadFn() {
|
downloadFn() {
|
||||||
const clientWidth = this.$refs.generateImg.offsetWidth;//获取容易的宽高
|
const clientWidth = this.$refs.generateImg.offsetWidth;
|
||||||
const clientHeight = this.$refs.generateImg.offsetHeight;
|
const clientHeight = this.$refs.generateImg.offsetHeight;
|
||||||
let canvas = document.createElement("canvas");//创建Canvas对象
|
const kh = [clientWidth, clientHeight];
|
||||||
var scale = 2;//用于渲染的比例。默认为浏览器设备像素比率
|
|
||||||
canvas.width = clientWidth * scale;
|
|
||||||
canvas.height = clientHeight * scale;
|
|
||||||
const ops = {
|
|
||||||
|
|
||||||
width: clientWidth,//画布的宽度
|
html2canvas(this.$refs.generateImg, { useCORS: true, logging: true }).then((canvas) => {
|
||||||
height: clientHeight,//画布的高度
|
const dataURL = canvas.toDataURL('image/png');
|
||||||
// 跨域配置
|
this.download(dataURL, kh);
|
||||||
useCORS: true, // 使用跨域
|
|
||||||
allowTaint: true, // 允许使用跨域资源
|
|
||||||
tainTest: false,
|
|
||||||
scale: scale,
|
|
||||||
backgroundColor: null,
|
|
||||||
};
|
|
||||||
html2canvas(this.$refs.generateImg, ops).then((canvas) => {
|
|
||||||
// 转成图片,生成图片地址
|
|
||||||
this.imgUrl = canvas.toDataURL("image/png");
|
|
||||||
this.download(this.imgUrl, [canvas.width, canvas.height]);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
download(imgUrl, kh) {
|
|
||||||
this.getUrlBase64(imgUrl, kh).then((base64) => {
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = base64;
|
|
||||||
link.download = `图片.png`;
|
|
||||||
link.click();
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getUrlBase64(url, kh) {
|
getUrlBase64(url, kh) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
let canvas = document.createElement("canvas");
|
let canvas = document.createElement('canvas');
|
||||||
const ctx = canvas.getContext("2d");
|
const ctx = canvas.getContext('2d');
|
||||||
const img = new Image();
|
const img = new Image();
|
||||||
img.crossOrigin = "Anonymous"; // 允许跨域
|
img.crossOrigin = 'Anonymous'; // 允许跨域
|
||||||
img.src = url;
|
img.src = url;
|
||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
// eslint-disable-next-line prefer-destructuring
|
// eslint-disable-next-line prefer-destructuring
|
||||||
@@ -266,13 +244,21 @@ export default {
|
|||||||
// eslint-disable-next-line prefer-destructuring
|
// eslint-disable-next-line prefer-destructuring
|
||||||
canvas.width = kh[0];
|
canvas.width = kh[0];
|
||||||
ctx.drawImage(img, 0, 0, kh[0], kh[1]);
|
ctx.drawImage(img, 0, 0, kh[0], kh[1]);
|
||||||
const dataURL = canvas.toDataURL("image/png");
|
const dataURL = canvas.toDataURL('image/png');
|
||||||
canvas = null;
|
canvas = null;
|
||||||
resolve(dataURL);
|
resolve(dataURL);
|
||||||
this.$toast('下载成功')
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
download(imgUrl, kh) {
|
||||||
|
this.getUrlBase64(imgUrl, kh).then((base64) => {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = base64;
|
||||||
|
link.download = `业绩贺报.png`;
|
||||||
|
link.click();
|
||||||
|
this.$toast('下载成功')
|
||||||
|
});
|
||||||
|
},
|
||||||
close() {
|
close() {
|
||||||
this.$emit('child-colse', '1')
|
this.$emit('child-colse', '1')
|
||||||
this.$refs.generateImg.src = '';
|
this.$refs.generateImg.src = '';
|
||||||
|
|||||||
Reference in New Issue
Block a user