搜索到
1
篇与
的结果
-
小程序给图片添加水印（时间，经纬度信息） 在移动互联网时代，小程序因其轻量、便捷的特性，逐渐成为用户日常生活中不可或缺的工具。无论是社交、购物，还是记录生活，小程序都提供了丰富的功能。然而，随着用户对数据安全和信息追溯需求的增加，如何在图片中添加关键信息（如时间、经纬度等）成为开发者需要解决的问题之一。尤其是在一些特定场景下，如户外打卡、旅行记录、证据留存等，为图片添加时间戳和地理位置信息不仅能增强数据的可信度，还能为用户提供更丰富的上下文信息。本文将详细介绍如何在小程序中实现为图片添加时间、经纬度信息的水印功能。我们将从获取用户地理位置、格式化时间信息，到将水印动态添加到图片中，一步步讲解实现过程。无论你是小程序开发新手，还是有一定经验的开发者，都能通过本文掌握这一实用技能，为你的小程序增添更多实用价值。让我们一起探索如何通过技术手段，让每一张图片都“有迹可循”。实现思路如下：1、使用小程序的canvas来绘制图片，画布的大小根据图片的实际宽高设置2、在画布中左下角位置一个黑色半透明的矩形3、在矩形上绘制文本，文本内容为时间和经纬度4、使用 wx.canvasToTempFilePath 方法将canvas内容导出成图片缓存到小程序本地存储5、使用 wx.compressImage 压缩图片，这一步很重要，因为通过canvas直接导出的图片非常大，所以要根据情况压缩图片import moment from '../../utils/moment'; export const addWatermark = (pageIns, imgpath, position) => { const time = moment().format('YYYY-MM-DD HH:mm:ss'); return new Promise((resolve, reject) => { const dataSrc = imgpath; const query = pageIns.createSelectorQuery(); console.log('query canvas result', query); query.select('#watermark-canvas') .fields({ node: true, size: true }) .exec(async (res) => { console.log('query canvas result', res); const canvas = res[0].node; const ctx = canvas.getContext('2d'); // 加载图片 const img = canvas.createImage(); img.src = dataSrc; // 替换为你的图片地址 img.onload = () => { // 获取原图的宽高 const imgWidth = img.width; const imgHeight = img.height; console.log('待压缩图片宽高', imgWidth, imgHeight); // 设置 Canvas 的实际宽高为原图的宽高 const dpr = wx.getSystemInfoSync().pixelRatio; canvas.width = imgWidth * dpr; canvas.height = imgHeight * dpr; ctx.scale(dpr, dpr); // 绘制图片 ctx.drawImage(img, 0, 0, imgWidth, imgHeight); // 绘制黑色半透明矩形块 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; // ctx.fillRect(0, imgHeight - 60, imgWidth, 60); // 矩形块位于图片底部 ctx.fillRect(0, imgHeight - 60, 210, 60); // 绘制水印文本 ctx.font = '16px sans-serif'; ctx.fillStyle = '#ffffff'; ctx.fillText(time, 20, imgHeight - 35); // 文本位于矩形块内 ctx.fillText(position.latitude + '--' + position.longitude, 20, imgHeight - 14); // 文本位于矩形块内 // 生成临时文件路径 wx.canvasToTempFilePath({ canvas, fileType: 'jpg', destWidth: imgWidth, destHeight: imgHeight, quality: 0.5, success: (res) => { const tempFilePath = res.tempFilePath; wx.compressImage({ src: tempFilePath, // 图片路径 quality:60, // 压缩质量 success({tempFilePath: tempPathAfterCompress}) { console.log("压缩成功", tempPathAfterCompress) wx.getFileInfo({ filePath: tempPathAfterCompress, success(resInfo) { console.log('添加水印后文件大小（KB）:', (resInfo.size / 1024).toFixed(2)); // 输出文件大小（KB），保留两位小数 console.log('添加水印后文件大小（MB）:', (resInfo.size / (1024 * 1024)).toFixed(2)); // 输出文件大小（MB），保留两位小数 }, fail(err) { console.error('图片添加水印->获取文件信息失败', err); } }); resolve(tempPathAfterCompress); } }) }, fail: (error) => { console.info('给图片加水印，导出canvas处理后的图片错误', error) } }); }; }); }); } export const batchAddWatermark = (pageIns, paths, position) => { console.log('batchAddWatermark', paths); const promises = paths?.map(p => { return addWatermark(pageIns, p, position); }); console.log('promises of add watermark', promises); return Promise.all(promises) }
