| | |
| | | } |
| | | |
| | | // 注意图片的,onload是异步的,如果要封装成工具函数,需要用promise包装一下 |
| | | async function imgToBase64(url) { |
| | | return new Promise((resolve, reject) => { |
| | | const image = new Image() |
| | | image.src = url |
| | | image.onload = () => { |
| | | const canvas = document.createElement('canvas') |
| | | canvas.width = image.Width // 使用 naturalWidth 为了保证图片的清晰度 |
| | | canvas.height = image.Height |
| | | canvas.style.width = `${canvas.width / window.devicePixelRatio}px` |
| | | canvas.style.height = `${canvas.height / window.devicePixelRatio}px` |
| | | const ctx = canvas.getContext('2d') |
| | | if (!ctx) { |
| | | return null |
| | | } |
| | | ctx.drawImage(image, 0, 0) |
| | | const base64 = canvas.toDataURL(url) |
| | | return resolve(base64) |
| | | } |
| | | image.onerror = (err) => { |
| | | return reject(err); |
| | | } |
| | | }) |
| | | } |
| | | async function imgToBase64(url) { |
| | | return new Promise((resolve, reject) => { |
| | | const image = new Image(); |
| | | image.src = url; |
| | | image.onload = () => { |
| | | const canvas = document.createElement('canvas'); |
| | | // 设置目标宽高,假设降低到原始的 50% |
| | | const targetWidth = image.naturalWidth / 2; |
| | | const targetHeight = image.naturalHeight / 2; |
| | | |
| | | canvas.width = targetWidth; |
| | | canvas.height = targetHeight; |
| | | |
| | | const ctx = canvas.getContext('2d'); |
| | | if (!ctx) { |
| | | return reject(new Error('Canvas context not found')); |
| | | } |
| | | |
| | | ctx.drawImage(image, 0, 0, targetWidth, targetHeight); |
| | | const base64 = canvas.toDataURL('image/jpeg', 0.7); // 设置质量为 0.7 |
| | | return resolve(base64); |
| | | }; |
| | | image.onerror = (err) => { |
| | | return reject(err); |
| | | }; |
| | | }); |
| | | } |
| | | |
| | | |
| | | // 引入项目中的图片 |
| | | // const imgUrl = require('xxx.png'); |
| | |
| | | console.log(files[i].path.toString()) |
| | | // console.log(filesbase64[0].toString()) |
| | | //filesbase64[i]=getBase64Image(files[i].path.toString()); |
| | | |
| | | console.log("图纸内容:"); |
| | | console.log(filesbase64[i]); |
| | | |
| | | |
| | | |
| | | } |