添加上传接口获取图片地址

This commit is contained in:
dong.ai
2024-10-30 11:14:19 +08:00
parent d2c80c293f
commit df6bde6661
2 changed files with 43 additions and 24 deletions

View File

@@ -118,3 +118,13 @@ export function exportExcel(data) {
data data
}) })
} }
export function base64Excel(data) {
return request({
// url: 'http://10.10.100.98:7012/updown/uploadBase64Image',
url: getUrl('/uploadBase64Image', 1,2),
method: 'post',
data
})
}

View File

@@ -22,6 +22,7 @@
<script> <script>
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import { base64Excel } from '@/api/ebiz/nbs'
export default { export default {
name: 'generateImg', name: 'generateImg',
data() { data() {
@@ -78,7 +79,7 @@ export default {
width: domElement.offsetWidth, width: domElement.offsetWidth,
height: domElement.offsetHeight, height: domElement.offsetHeight,
backgroundColor: '#fff', backgroundColor: '#fff',
scale: 2, scale: 1,
dpi: 300 dpi: 300
}).then((canvas) => { }).then((canvas) => {
// 转换canvas为PNG图片并压缩 // 转换canvas为PNG图片并压缩
@@ -94,29 +95,24 @@ export default {
// URL.revokeObjectURL(newimg.src) // URL.revokeObjectURL(newimg.src)
// callback(newimg) // callback(newimg)
// } // }
// this.blobToBase64(blob).then((base64String) => { this.blobToBase64(blob).then((base64String) => {
// console.log(base64String, '==') base64Excel({ base64Img: base64String }).then(res => {
// EWebBridge.webCallAppInJs('download', { if (res.result == '0') {
// name: '业绩贺报.png', EWebBridge.webCallAppInJs('download', {
// url: base64String name: '业绩贺报.png',
// }) url: location.origin + res.path
// .then(() => { })
// console.log('下载完成') .then(() => {
// }) console.log('下载完成')
// .catch(() => { })
// this.$toast.fail('图片下载失败,请重新下载!') .catch(() => {
// }) this.$toast.fail('图片下载失败,请重新下载!')
// }) })
let newimg = new Image() }
newimg.src = URL.createObjectURL(blob)
newimg.onload = function () {
URL.revokeObjectURL(newimg.src)
console.log(newimg.src);
EWebBridge.webCallAppInJs('download', {
name: '开门红方案.png',
url: newimg.src
}) })
}
})
}, },
'image/png' 'image/png'
// quality // quality
@@ -136,31 +132,37 @@ img {
width: 100%; width: 100%;
position: relative; position: relative;
} }
.box { .box {
position: absolute; position: absolute;
width: 80%; width: 80%;
height: 40%; height: 40%;
top: 38%; top: 38%;
left: 10%; left: 10%;
.title { .title {
position: absolute; position: absolute;
width: 100%; width: 100%;
// left: 30%; // left: 30%;
top: 24%; top: 24%;
font-weight: bold; font-weight: bold;
p { p {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.organ { .organ {
font-size: 12px; font-size: 12px;
color: #b7170b; color: #b7170b;
} }
.name { .name {
font-size: 17px; font-size: 17px;
color: #b7170b; color: #b7170b;
} }
} }
.pName { .pName {
position: absolute; position: absolute;
top: 44%; top: 44%;
@@ -170,6 +172,7 @@ img {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.type { .type {
font-size: 22px; font-size: 22px;
color: #efbc4f; color: #efbc4f;
@@ -179,6 +182,7 @@ img {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.yuan { .yuan {
font-size: 30px; font-size: 30px;
color: #efbc4f; color: #efbc4f;
@@ -188,11 +192,13 @@ img {
text-align: center; text-align: center;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
span { span {
font-size: 14px; font-size: 14px;
margin-left: 5px; margin-left: 5px;
} }
} }
.time { .time {
font-size: 14px; font-size: 14px;
color: #efbc4f; color: #efbc4f;
@@ -203,13 +209,16 @@ img {
justify-content: center; justify-content: center;
} }
} }
.border-color { .border-color {
z-index: 9999; z-index: 9999;
border: 2px solid; border: 2px solid;
border-image: radial-gradient(circle, rgba(255, 233, 124, 1), rgba(222, 144, 34, 1)) 2 2; border-image: radial-gradient(circle, rgba(255, 233, 124, 1), rgba(222, 144, 34, 1)) 2 2;
} }
/deep/ .van-button--danger { /deep/ .van-button--danger {
background: linear-gradient(to right, #f26e43, #ac0209) !important; /*设置按钮为渐变颜色*/ background: linear-gradient(to right, #f26e43, #ac0209) !important;
/*设置按钮为渐变颜色*/
border: none !important; border: none !important;
} }
</style> </style>