当前位置：首页 > news >正文

纯JS前端转图片成tiff格式

news 来源：原创 2025/5/23 6:22:40

1. 引用js类库【UTIF.min.js】

2. 方法

async function DownTiffPic(imageUrl,skuId)
{try{// 执行转换const tiffBlob = await ConvertPngToTiff(imageUrl);// 下载文件DownloadBlob(tiffBlob, skuId + '.tiff');} catch (error){console.error('转换失败:', error);alert('转换失败: ' + error.message);}
}async function ConvertPngToTiff(url)
{// 1. 加载图片const img = await LoadImage(url);// 2. 绘制到canvas获取像素数据const canvas = document.createElement('canvas');canvas.width = img.naturalWidth;canvas.height = img.naturalHeight;const ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0);// 3. 获取图像数据const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 4. 使用UTIF.js编码为TIFFconst tiffData = UTIF.encodeImage(imageData.data,canvas.width,canvas.height);// 5. 转换为Blobreturn new Blob([tiffData], { type: 'image/tiff' });
}function LoadImage(url)
{return new Promise((resolve, reject) =>{const img = new Image();img.crossOrigin = 'Anonymous'; // 处理跨域img.onload = () => resolve(img);img.onerror = (err) => reject(new Error('图片加载失败'));img.src = url;});
}function DownloadBlob(blob, fileName)
{const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = fileName;document.body.appendChild(a);a.click();document.body.removeChild(a);setTimeout(() => URL.revokeObjectURL(url), 100);
}