style:证书预览
Showing
2 changed files
with
211 additions
and
32 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-08-25 09:21:38 | 4 | * @LastEditTime: 2023-08-25 10:34:46 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div> | 7 | <div> |
| ... | @@ -106,12 +106,23 @@ | ... | @@ -106,12 +106,23 @@ |
| 106 | this.loading = false | 106 | this.loading = false |
| 107 | }) | 107 | }) |
| 108 | }, | 108 | }, |
| 109 | // 不动产证书 | ||
| 110 | /** | 109 | /** |
| 111 | * @description: 不动产证书 | 110 | * @description: 不动产证书 |
| 112 | * @author: renchao | 111 | * @author: renchao |
| 113 | */ | 112 | */ |
| 114 | drawTextOnImage () { | 113 | drawTextOnImage () { |
| 114 | function getByteLen (val) { | ||
| 115 | var len = 0; | ||
| 116 | for (var i = 0; i < val.length; i++) { | ||
| 117 | var length = val.charCodeAt(i); | ||
| 118 | if (length >= 0 && length <= 128) { | ||
| 119 | len += 1; | ||
| 120 | } else { | ||
| 121 | len += 2; | ||
| 122 | } | ||
| 123 | } | ||
| 124 | return len; | ||
| 125 | } | ||
| 115 | const canvas = this.$refs.zs; | 126 | const canvas = this.$refs.zs; |
| 116 | const context = canvas.getContext('2d'); | 127 | const context = canvas.getContext('2d'); |
| 117 | const image = new Image(); | 128 | const image = new Image(); |
| ... | @@ -123,30 +134,29 @@ | ... | @@ -123,30 +134,29 @@ |
| 123 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56); | 134 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56); |
| 124 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56); | 135 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56); |
| 125 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56); | 136 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56); |
| 126 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 138, 97); | 137 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 129, 97); |
| 127 | context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 138, 138); | 138 | context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 129, 136); |
| 128 | context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 138, 180); | 139 | |
| 129 | // 不动产单元号 | ||
| 130 | this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' + | 140 | this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' + |
| 131 | this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length) | 141 | this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length) |
| 132 | context.fillText(this.bdcdyh ? this.bdcdyh : '', 138, 223); | 142 | context.fillText(this.bdcdyh ? this.bdcdyh : '', 129, 223); |
| 133 | 143 | ||
| 134 | 144 | ||
| 135 | context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 138, 263); | 145 | |
| 136 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303); | 146 | context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263); |
| 137 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346); | 147 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303); |
| 138 | context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386); | 148 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346); |
| 139 | // 使用期限 | 149 | // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386); |
| 140 | if (this.bdcqz.syqx && this.bdcqz.syqx.length > 28) { | 150 | let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : []; |
| 141 | let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : []; | 151 | if (getByteLen(this.bdcqz.mj) > 41) { |
| 142 | lines3.forEach((line, index) => { | 152 | lines6.forEach((line, index) => { |
| 143 | const y = 427 + (index * 27); // 每行文本的垂直位置 | 153 | const y = 378 + (index * 27); // 每行文本的垂直位置 |
| 144 | let currentLine = ''; | 154 | let currentLine = ''; |
| 145 | let arr = []; | 155 | let arr = []; |
| 146 | for (let word of line) { | 156 | for (let word of line) { |
| 147 | const testLine = currentLine + word; | 157 | const testLine = currentLine + word; |
| 148 | const lineWidth = context.measureText(testLine).width; | 158 | const lineWidth = context.measureText(testLine).width; |
| 149 | if (lineWidth <= 315) { | 159 | if (lineWidth <= 330) { |
| 150 | currentLine = testLine; | 160 | currentLine = testLine; |
| 151 | } else { | 161 | } else { |
| 152 | arr.push(currentLine); | 162 | arr.push(currentLine); |
| ... | @@ -155,18 +165,37 @@ | ... | @@ -155,18 +165,37 @@ |
| 155 | } | 165 | } |
| 156 | arr.push(currentLine); | 166 | arr.push(currentLine); |
| 157 | arr.forEach((line, index) => { | 167 | arr.forEach((line, index) => { |
| 158 | context.fillText(line, 138, y + (index * 20)); // 调整行高 | 168 | context.fillText(line, 129, y + (index * 20)); // 调整行高 |
| 159 | }) | 169 | }) |
| 160 | }) | 170 | }) |
| 161 | } else { | 171 | } else { |
| 162 | context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429); | 172 | lines6.forEach((line, index) => { |
| 173 | const y = 386 + (index * 27); // 每行文本的垂直位置 | ||
| 174 | let currentLine = ''; | ||
| 175 | let arr = []; | ||
| 176 | for (let word of line) { | ||
| 177 | const testLine = currentLine + word; | ||
| 178 | const lineWidth = context.measureText(testLine).width; | ||
| 179 | if (lineWidth <= 330) { | ||
| 180 | currentLine = testLine; | ||
| 181 | } else { | ||
| 182 | arr.push(currentLine); | ||
| 183 | currentLine = word; | ||
| 184 | } | ||
| 185 | } | ||
| 186 | arr.push(currentLine); | ||
| 187 | arr.forEach((line, index) => { | ||
| 188 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 189 | }) | ||
| 190 | }) | ||
| 163 | } | 191 | } |
| 164 | 192 | ||
| 193 | // context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429); | ||
| 165 | // qlqtzk | 194 | // qlqtzk |
| 166 | const maxWidth = 305; // 最大宽度限制 | 195 | const maxWidth = 330; // 最大宽度限制 |
| 167 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; | 196 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; |
| 168 | lines.forEach((line, index) => { | 197 | lines.forEach((line, index) => { |
| 169 | const y = 469 + (index * 37); // 每行文本的垂直位置 | 198 | const y = 463 + (index * 40); // 每行文本的垂直位置 |
| 170 | let currentLine = ''; | 199 | let currentLine = ''; |
| 171 | let arr = []; | 200 | let arr = []; |
| 172 | for (let word of line) { | 201 | for (let word of line) { |
| ... | @@ -181,13 +210,12 @@ | ... | @@ -181,13 +210,12 @@ |
| 181 | } | 210 | } |
| 182 | arr.push(currentLine); | 211 | arr.push(currentLine); |
| 183 | arr.forEach((line, index) => { | 212 | arr.forEach((line, index) => { |
| 184 | context.fillText(line, 138, y + (index * 20)); // 调整行高 | 213 | context.fillText(line, 129, y + (index * 20)); // 调整行高 |
| 185 | }) | 214 | }) |
| 186 | }) | 215 | }) |
| 187 | |||
| 188 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : []; | 216 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : []; |
| 189 | lines1.forEach((line, index) => { | 217 | lines1.forEach((line, index) => { |
| 190 | const y = 100 + (index * 37); // 每行文本的垂直位置 | 218 | const y = 100 + (index * 30); // 每行文本的垂直位置 |
| 191 | let currentLine = ''; | 219 | let currentLine = ''; |
| 192 | let arr = []; | 220 | let arr = []; |
| 193 | for (let word of line) { | 221 | for (let word of line) { |
| ... | @@ -202,10 +230,95 @@ | ... | @@ -202,10 +230,95 @@ |
| 202 | } | 230 | } |
| 203 | arr.push(currentLine); | 231 | arr.push(currentLine); |
| 204 | arr.forEach((line, index) => { | 232 | arr.forEach((line, index) => { |
| 205 | context.fillText(line, 580, y + (index * 20)); // 调整行高 | 233 | context.fillText(line, 580, y + (index * 30)); // 调整行高 |
| 234 | }) | ||
| 235 | }) | ||
| 236 | let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : []; | ||
| 237 | if (getByteLen(this.bdcqz.syqx) > 41) { | ||
| 238 | lines3.forEach((line, index) => { | ||
| 239 | const y = 423 + (index * 27); // 每行文本的垂直位置 | ||
| 240 | let currentLine = ''; | ||
| 241 | let arr = []; | ||
| 242 | for (let word of line) { | ||
| 243 | const testLine = currentLine + word; | ||
| 244 | const lineWidth = context.measureText(testLine).width; | ||
| 245 | if (lineWidth <= 330) { | ||
| 246 | currentLine = testLine; | ||
| 247 | } else { | ||
| 248 | arr.push(currentLine); | ||
| 249 | currentLine = word; | ||
| 250 | } | ||
| 251 | } | ||
| 252 | arr.push(currentLine); | ||
| 253 | arr.forEach((line, index) => { | ||
| 254 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 255 | }) | ||
| 256 | }) | ||
| 257 | } else { | ||
| 258 | lines3.forEach((line, index) => { | ||
| 259 | const y = 430 + (index * 27); // 每行文本的垂直位置 | ||
| 260 | let currentLine = ''; | ||
| 261 | let arr = []; | ||
| 262 | for (let word of line) { | ||
| 263 | const testLine = currentLine + word; | ||
| 264 | const lineWidth = context.measureText(testLine).width; | ||
| 265 | if (lineWidth <= 315) { | ||
| 266 | currentLine = testLine; | ||
| 267 | } else { | ||
| 268 | arr.push(currentLine); | ||
| 269 | currentLine = word; | ||
| 270 | } | ||
| 271 | } | ||
| 272 | arr.push(currentLine); | ||
| 273 | arr.forEach((line, index) => { | ||
| 274 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 206 | }) | 275 | }) |
| 207 | }) | 276 | }) |
| 208 | } | 277 | } |
| 278 | |||
| 279 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; | ||
| 280 | if (getByteLen(this.bdcqz.zl) > 41) { | ||
| 281 | lines2.forEach((line, index) => { | ||
| 282 | const y = 170 + (index * 20); // 每行文本的垂直位置 | ||
| 283 | let currentLine = ''; | ||
| 284 | let arr = []; | ||
| 285 | for (let word of line) { | ||
| 286 | const testLine = currentLine + word; | ||
| 287 | const lineWidth = context.measureText(testLine).width; | ||
| 288 | if (lineWidth <= 336) { | ||
| 289 | currentLine = testLine; | ||
| 290 | } else { | ||
| 291 | arr.push(currentLine); | ||
| 292 | currentLine = word; | ||
| 293 | } | ||
| 294 | } | ||
| 295 | arr.push(currentLine); | ||
| 296 | arr.forEach((line, index) => { | ||
| 297 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 298 | }) | ||
| 299 | }) | ||
| 300 | } else { | ||
| 301 | lines2.forEach((line, index) => { | ||
| 302 | const y = 180 + (index * 20); // 每行文本的垂直位置 | ||
| 303 | let currentLine = ''; | ||
| 304 | let arr = []; | ||
| 305 | for (let word of line) { | ||
| 306 | const testLine = currentLine + word; | ||
| 307 | const lineWidth = context.measureText(testLine).width; | ||
| 308 | if (lineWidth <= 336) { | ||
| 309 | currentLine = testLine; | ||
| 310 | } else { | ||
| 311 | arr.push(currentLine); | ||
| 312 | currentLine = word; | ||
| 313 | } | ||
| 314 | } | ||
| 315 | arr.push(currentLine); | ||
| 316 | arr.forEach((line, index) => { | ||
| 317 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 318 | }) | ||
| 319 | }) | ||
| 320 | } | ||
| 321 | } | ||
| 209 | image.src = this.imgSrc | 322 | image.src = this.imgSrc |
| 210 | }, | 323 | }, |
| 211 | /** | 324 | /** | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-08-25 09:31:57 | 4 | * @LastEditTime: 2023-08-25 10:44:31 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;"> | 7 | <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;"> |
| ... | @@ -122,6 +122,18 @@ | ... | @@ -122,6 +122,18 @@ |
| 122 | * @author: renchao | 122 | * @author: renchao |
| 123 | */ | 123 | */ |
| 124 | drawTextOnImage () { | 124 | drawTextOnImage () { |
| 125 | function getByteLen (val) { | ||
| 126 | var len = 0; | ||
| 127 | for (var i = 0; i < val.length; i++) { | ||
| 128 | var length = val.charCodeAt(i); | ||
| 129 | if (length >= 0 && length <= 128) { | ||
| 130 | len += 1; | ||
| 131 | } else { | ||
| 132 | len += 2; | ||
| 133 | } | ||
| 134 | } | ||
| 135 | return len; | ||
| 136 | } | ||
| 125 | const canvas = this.$refs.zs; | 137 | const canvas = this.$refs.zs; |
| 126 | const context = canvas.getContext('2d'); | 138 | const context = canvas.getContext('2d'); |
| 127 | const image = new Image(); | 139 | const image = new Image(); |
| ... | @@ -145,10 +157,52 @@ | ... | @@ -145,10 +157,52 @@ |
| 145 | context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263); | 157 | context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263); |
| 146 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303); | 158 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303); |
| 147 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346); | 159 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346); |
| 148 | context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386); | 160 | // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386); |
| 161 | let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : []; | ||
| 162 | if (getByteLen(this.bdcqz.mj) > 41) { | ||
| 163 | lines6.forEach((line, index) => { | ||
| 164 | const y = 378 + (index * 27); // 每行文本的垂直位置 | ||
| 165 | let currentLine = ''; | ||
| 166 | let arr = []; | ||
| 167 | for (let word of line) { | ||
| 168 | const testLine = currentLine + word; | ||
| 169 | const lineWidth = context.measureText(testLine).width; | ||
| 170 | if (lineWidth <= 330) { | ||
| 171 | currentLine = testLine; | ||
| 172 | } else { | ||
| 173 | arr.push(currentLine); | ||
| 174 | currentLine = word; | ||
| 175 | } | ||
| 176 | } | ||
| 177 | arr.push(currentLine); | ||
| 178 | arr.forEach((line, index) => { | ||
| 179 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 180 | }) | ||
| 181 | }) | ||
| 182 | } else { | ||
| 183 | lines6.forEach((line, index) => { | ||
| 184 | const y = 386 + (index * 27); // 每行文本的垂直位置 | ||
| 185 | let currentLine = ''; | ||
| 186 | let arr = []; | ||
| 187 | for (let word of line) { | ||
| 188 | const testLine = currentLine + word; | ||
| 189 | const lineWidth = context.measureText(testLine).width; | ||
| 190 | if (lineWidth <= 330) { | ||
| 191 | currentLine = testLine; | ||
| 192 | } else { | ||
| 193 | arr.push(currentLine); | ||
| 194 | currentLine = word; | ||
| 195 | } | ||
| 196 | } | ||
| 197 | arr.push(currentLine); | ||
| 198 | arr.forEach((line, index) => { | ||
| 199 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 200 | }) | ||
| 201 | }) | ||
| 202 | } | ||
| 149 | // context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429); | 203 | // context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429); |
| 150 | // qlqtzk | 204 | // qlqtzk |
| 151 | const maxWidth = 333; // 最大宽度限制 | 205 | const maxWidth = 330; // 最大宽度限制 |
| 152 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; | 206 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; |
| 153 | lines.forEach((line, index) => { | 207 | lines.forEach((line, index) => { |
| 154 | const y = 463 + (index * 40); // 每行文本的垂直位置 | 208 | const y = 463 + (index * 40); // 每行文本的垂直位置 |
| ... | @@ -190,7 +244,7 @@ | ... | @@ -190,7 +244,7 @@ |
| 190 | }) | 244 | }) |
| 191 | }) | 245 | }) |
| 192 | let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : []; | 246 | let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : []; |
| 193 | if (lines3.length >= 22) { | 247 | if (getByteLen(this.bdcqz.syqx) > 41) { |
| 194 | lines3.forEach((line, index) => { | 248 | lines3.forEach((line, index) => { |
| 195 | const y = 423 + (index * 27); // 每行文本的垂直位置 | 249 | const y = 423 + (index * 27); // 每行文本的垂直位置 |
| 196 | let currentLine = ''; | 250 | let currentLine = ''; |
| ... | @@ -198,7 +252,7 @@ | ... | @@ -198,7 +252,7 @@ |
| 198 | for (let word of line) { | 252 | for (let word of line) { |
| 199 | const testLine = currentLine + word; | 253 | const testLine = currentLine + word; |
| 200 | const lineWidth = context.measureText(testLine).width; | 254 | const lineWidth = context.measureText(testLine).width; |
| 201 | if (lineWidth <= 315) { | 255 | if (lineWidth <= 330) { |
| 202 | currentLine = testLine; | 256 | currentLine = testLine; |
| 203 | } else { | 257 | } else { |
| 204 | arr.push(currentLine); | 258 | arr.push(currentLine); |
| ... | @@ -233,7 +287,7 @@ | ... | @@ -233,7 +287,7 @@ |
| 233 | } | 287 | } |
| 234 | 288 | ||
| 235 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; | 289 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; |
| 236 | if (lines2.length >= 22) { | 290 | if (getByteLen(this.bdcqz.zl) > 41) { |
| 237 | lines2.forEach((line, index) => { | 291 | lines2.forEach((line, index) => { |
| 238 | const y = 170 + (index * 20); // 每行文本的垂直位置 | 292 | const y = 170 + (index * 20); // 每行文本的垂直位置 |
| 239 | let currentLine = ''; | 293 | let currentLine = ''; |
| ... | @@ -282,6 +336,19 @@ | ... | @@ -282,6 +336,19 @@ |
| 282 | * @author: renchao | 336 | * @author: renchao |
| 283 | */ | 337 | */ |
| 284 | drawTextzmImage () { | 338 | drawTextzmImage () { |
| 339 | function getByteLen (val) { | ||
| 340 | var len = 0; | ||
| 341 | for (var i = 0; i < val.length; i++) { | ||
| 342 | var length = val.charCodeAt(i); | ||
| 343 | if (length >= 0 && length <= 128) { | ||
| 344 | len += 1; | ||
| 345 | } else { | ||
| 346 | len += 2; | ||
| 347 | } | ||
| 348 | } | ||
| 349 | return len; | ||
| 350 | } | ||
| 351 | |||
| 285 | const canvas = this.$refs.zm; | 352 | const canvas = this.$refs.zm; |
| 286 | const context = canvas.getContext('2d'); | 353 | const context = canvas.getContext('2d'); |
| 287 | const image = new Image(); | 354 | const image = new Image(); |
| ... | @@ -355,7 +422,6 @@ | ... | @@ -355,7 +422,6 @@ |
| 355 | context.fillText(line, 775, y + (index * 16)); // 调整行高 | 422 | context.fillText(line, 775, y + (index * 16)); // 调整行高 |
| 356 | }) | 423 | }) |
| 357 | }) | 424 | }) |
| 358 | |||
| 359 | // fj | 425 | // fj |
| 360 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : []; | 426 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : []; |
| 361 | lines1.forEach((line, index) => { | 427 | lines1.forEach((line, index) => { | ... | ... |
-
Please register or sign in to post a comment