uni-app 拍照图片添加水印

获取图片信息

 uni.chooseImage({count: 6, //默认9sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有sourceType: ["camera"], //从相册选择success: async function (result: any) {if (!props.isMark) {const res: any = await uploadFilePromise(result.tempFilePaths[0]);if (res) {show.value = false;}emit("handleFileList", res);return;}show.value = true;const reader = new FileReader();reader.onload = async (e: any) => {originalImage.value = e.target.result;await addWatermark();};reader.readAsDataURL(result.tempFiles[0]);},});

添加水印

1. 由于使用canvas添加水印后图片很大，所以压缩一下图片大小
2. 使用compressImg1方法压缩图片大小

const addWatermark = () => {const img = new Image();img.onload = async () => {const canvas = document.createElement("canvas");const ctx: any = canvas.getContext("2d");// 设置画布大小与图片相同canvas.width = img.width;canvas.height = img.height;// 绘制原图ctx.drawImage(img, 0, 0);// 添加水印// 设置字体大小，假设图片宽度大于600px，字体大小为24px，否则为图片宽度的10%var fontSize = canvas.width > 600 ? canvas.width / 20 : 16;// 设置字体大小，并将其转换为像素值console.log(fontSize, "fontSizefontSize字体大小---");ctx.font = fontSize + "px Arial";// 设置字体样式let time = moment().format("YYYY-MM-DD HH:MM:SS");let height = canvas.height - 50;let height1 = canvas.height - 20;if (canvas.width > 600) {height = canvas.height - 290;height1 = canvas.height - 50;}//获取图片指定位置的像素颜色const pixel = ctx.getImageData(10, height, 1, 1).data;// 计算相对于背景的亮度const luminance = 0.2126 * pixel[0] + 0.7152 * pixel[1] + 0.0722 * pixel[2];// 根据亮度选择水印字体颜色const fontColor = luminance > 128 ? "black" : "#fff";ctx.fillStyle = fontColor ; // 半透明白色ctx.fillText("时间:" + time, 15, height);ctx.fillText(latLng.value, 15, height1);// 转换为 Base64watermarkedImage.value = await canvas.toDataURL("image/png", 0.8);let imgURL = await compressImg1(watermarkedImage.value, 0.8); // 压缩图片console.log(getBase64ImageSize(imgURL), "图片大小11111111111111");const result: any = await uploadFilePromise(imgURL);if (result) {show.value = false;}emit("handleFileList", result);};img.src = originalImage.value;
};

压缩图片的方法

export const   compressImg1 =  (base64, multiple)=> {return new Promise((resolve, reject) => {try {// 第一个参数就是需要加密的base65，// 第二个是压缩系数 0-1，// 第三个压缩后的回调 用来获取处理后的 base64if (!base64) {return}const length = base64.length / 1024// 压缩方法let newImage = new Image()let quality = 0.6    // 压缩系数0-1之间newImage.src = base64newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要let imgWidth,imgHeightlet w = undefinednewImage.onload = function () {// 这里面的 this 指向 newImage// 通过改变图片宽高来实现压缩w = this.width * multipleimgWidth = this.widthimgHeight = this.heightlet canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')if (Math.max(imgWidth, imgHeight) > w) {if (imgWidth > imgHeight) {canvas.width = w// 等比例缩小canvas.height = w * (imgHeight / imgWidth)} else {canvas.height = w// 等比例缩小canvas.width = w * (imgWidth / imgHeight)}} else {canvas.width = imgWidthcanvas.height = imgHeight// quality 设置转换为base64编码后图片的质量，取值范围为0-1  没什么压缩效果// 还是得通过设置 canvas 的宽高来压缩quality = 0.6}ctx.clearRect(0, 0, canvas.width, canvas.height)ctx.drawImage(this, 0, 0, canvas.width, canvas.height) //  // 这里面的 this 指向 newImagelet smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句// 必须通过回调函数返回，否则无法及时拿到该值，回调函数异步执行console.log(`压缩前：${length}KB`)console.log(`压缩后：${smallBase64.length / 1024} KB`)resolve(smallBase64) }
}
catch (error) {reject(error)throw new Error(error)
}
})}