更换贺报下载的方法2

This commit is contained in:
xuxingjun
2024-12-25 10:10:46 +08:00
parent ba7ee05264
commit a36dd38fad

View File

@@ -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; html2canvas(this.$refs.generateImg, { useCORS: true, logging: true }).then((canvas) => {
canvas.height = clientHeight * scale; const dataURL = canvas.toDataURL('image/png');
const ops = { this.download(dataURL, kh);
width: clientWidth,//画布的宽度
height: clientHeight,//画布的高度
// 跨域配置
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 = '';