长春网站建设公司排名,长沙网,wordpress 自己可见,网站开发线上销售技巧文章标题 01 功能说明02 使用方式 效果图2.1 基础用法2.2 拍照 底部定点水印 预览2.3 拍照 整体背景水印 预览 03 全部代码3.1 页面布局 html3.2 业务核心 js3.3 基础样式 css 01 功能说明
需求#xff1a;小程序端需要调用前置摄像头进行拍照#xff0c;并且将拍… 文章标题 01 功能说明02 使用方式 效果图2.1 基础用法2.2 拍照 底部定点水印 预览2.3 拍照 整体背景水印 预览 03 全部代码3.1 页面布局 html3.2 业务核心 js3.3 基础样式 css 01 功能说明
需求小程序端需要调用前置摄像头进行拍照并且将拍好的照片添加水印后返回。下面的代码支持 底部定点水印 和 整体背景水印。
技术栈uniapp、vue
迭代后期还可以继续 扩展多方位的定点水印 和 支持绘制多句话的背景水印。
02 使用方式 效果图
文件路径/components/CameraSnap.vue
2.1 基础用法
// 1仅拍照 预览
CameraSnap /// 4仅给图片添加水印 预览
CameraSnap photoSrcxxx :mark-list[今天天气很好,2023-01-01 00:00:00]
/2.2 拍照 底部定点水印 预览
使用方式
CameraSnap :mark-list[今天天气很好,2023-01-01 00:00:00] textSize24 useTextMask
/效果如下
2.3 拍照 整体背景水印 预览
使用方式
// 若不设置 markType则默认为 底部定点水印
// 目前背景水印只会取 markList 的第一项来绘制背景水印
CameraSnap markTypebackground :mark-list[今天天气很好] textColorrgba(255,255,255,0.5)
/效果如下
03 全部代码 uni-app camera 的官方文档https://uniapp.dcloud.net.cn/component/camera.html#camera 3.1 页面布局 html
templateview classcamera-wrapper!-- 拍照 --template v-if!snapSrc!-- 相机 --camera device-positionfront flashoff errorhandleError classimage-sizeview classphoto-btn clickhandleTakePhoto拍照/view/camera!-- 水印 --canvas canvas-idphotoMarkCanvas idphotoMarkCanvas classmark-canvas:style{width: canvasWidthpx,height: canvasHeightpx} //template!-- 预览 --template v-elseview classre-photo-btn clickhandleRephotograph重拍/viewimage classimage-size :srcsnapSrc/image/template/view
/template3.2 业务核心 js
scriptexport default {name: CameraSnap,props: {// 照片地址若传递了照片地址则默认为预览该照片或添加水印后预览photoSrc: {type: String,default: },// 水印类型markType: {type: String,default: fixed, // 定点水印 fixed背景水印 background},// 水印文本列表支持多行markList: {type: Array,default: () []},textColor: {type: String,default: #FFFFFF},textSize: {type: Number,default: 32},// 定点水印的遮罩为了让水印更清楚useTextMask: {type: Boolean,default: true}},data() {return {snapSrc: ,canvasWidth: ,canvasHeight: ,}},watch: {photoSrc: {handler: function(newValue, oldValue) {if (newValue) {this.getWaterMarkImgPath(newValue)}},immediate: true}},methods: {handleTakePhoto() {const ctx uni.createCameraContext();ctx.takePhoto({quality: high,success: (res) {const imgPath res.tempImagePathif (this.markList.length) {this.getWaterMarkImgPath(imgPath)} else {this.snapSrc imgPath;console.log(default, this.snapSrc)this.$emit(complete, imgPath)}}});},handleRephotograph() {this.snapSrc },handleError(err) {uni.showModal({title: 警告,content: 若不授权使用摄像头将无法使用拍照功能,cancelText: 不授权,confirmText: 授权,success: (res) {if (res.confirm) {// 允许打开授权页面调起客户端小程序设置界面返回用户设置的操作结果uni.openSetting({success: (res) {res.authSetting { scope.camera: true }},})} else if (res.cancel) {// 拒绝打开授权页面uni.showToast({ title: 您已拒绝授权无法进行拍照, icon: error, duration: 2500 });}}})},setWaterMark(context, image) {const listLength this.markList?.lengthswitch (this.markType) {case fixed:const spacing 4 // 行间距const paddingTopBottom 20 // 整体上下间距// 默认每行的高度 字体高度 向下间隔const lineHeight this.textSize spacingconst allLineHeight lineHeight * listLength// 矩形遮罩的 Y 坐标const maskRectY image.height - allLineHeight// 绘制遮罩层if (this.useTextMask) {context.setFillStyle(rgba(0,0,0,0.4));context.fillRect(0, maskRectY - paddingTopBottom, image.width, allLineHeight paddingTopBottom)}// 文本与 x 轴之间的间隔const textX 10// 文本一行的最大宽度减去 20 是为了一行的左右留间隙const maxWidth image.width - 20context.setFillStyle(this.textColor)context.setFontSize(this.textSize)this.markList.forEach((item, index) {// 因为文本的 Y 坐标是指文本基线的 Y 轴坐标所以要获取文本顶部的 Y 坐标const textY maskRectY - paddingTopBottom / 2 this.textSize lineHeight * indexcontext.fillText(item, textX, textY, maxWidth);})break;case background:context.translate(0, 0);context.rotate(30 * Math.PI / 180);context.setFillStyle(this.textColor)context.setFontSize(this.textSize)const colSize parseInt(image.height / 6)const rowSize parseInt(image.width / 2)let x -rowSizelet y -colSize// 循环绘制 5 行 6 列 的文字for (let i 1; i 6; i) {for (let j 1; j 5; j) {context.fillText(this.markList[0], x, y, rowSize)// 每个水印间隔 20x rowSize 20}y colSizex -rowSize}break;}context.save();},getWaterMarkImgPath(src) {const _this thisuni.getImageInfo({src,success: (image) {this.canvasWidth image.widththis.canvasHeight image.heightconst context uni.createCanvasContext(photoMarkCanvas, this)context.drawImage(src, 0, 0, image.width, image.height)// 设置水印this.setWaterMark(context, image)// 若还需其他操作可在操作之后叠加保存context.restore()// 将画布上的图保存为图片context.draw(false, () {setTimeout(() {uni.canvasToTempFilePath({destWidth: image.width,destHeight: image.height,canvasId: photoMarkCanvas,fileType: jpg,success: function(res) {_this.snapSrc res.tempFilePathconsole.log(water, _this.snapSrc)_this.$emit(complete, _this.snapSrc)}},_this);}, 200)});}})},}}
/script3.3 基础样式 css
style langscss scoped.camera-wrapper {position: relative;}.mark-canvas {position: absolute;/* 将画布移出展示区域 */top: -200vh;left: -200vw;}.image-size {width: 100%;height: 100vh;}.photo-btn {position: absolute;bottom: 100rpx;left: 50%;transform: translateX(-50%);width: 140rpx;height: 140rpx;line-height: 140rpx;text-align: center;background-color: #000000;border-radius: 50%;border: 10rpx solid #ffffff;color: #fff;}.re-photo-btn {position: absolute;bottom: 80rpx;right: 40rpx;padding: 10rpx 20rpx;background-color: #000000;border-radius: 10%;border: 6rpx solid #ffffff;color: #fff}
/style
