uni-app 实现照片水印并上传照片

话不多说，直接代码

<template><view class="wrap"><u-form :model="model" ref="uForm" ><u-form-item :label-position="labelPosition" label="照片信息:" prop="photo" label-width="160"><u-upload width="160" :deletable="false" // 是否允许删除:show-progress="false"  // 是否展示进度:source-type="sourceType" // 图片来源:before-upload="beforeUpload" // 上传前钩子:action="'服务器地址'" :header="header"  // 上传携带的头信息，对象形式:form-data = "formData" // 上传额外携带的参数></u-upload></u-form-item></u-form><view style="position: absolute;top: -999999px;"><view><canvas style="width: 1000px;height: 1000px;" canvas-id="firstCanvas"></canvas></view></view></view>
</template><script>export default {data() {return {header: {'X-Access-Token': uni.getStorageSync('token')},     formData: {'biz': 'mobile'},sourceType: ['camera']};},methods: {// 上传照片async beforeUpload(index, list) {uni.showLoading({title: '上传中...',})var data = await this.getWatermark(index, list);uni.hideLoading()return data;},//照片添加水印getWatermark(index, list){return new Promise((resolve, reject) => {var that = this;uni.getImageInfo({src: list[index].url,success: (ress) => {let ctx = uni.createCanvasContext('firstCanvas'); //创建画布//将图片src放到cancas内，宽高为图片大小ctx.drawImage(list[index].url, 0, 0, ress.width / 3, ress.height / 3)ctx.setFontSize(15) //字体大小ctx.setFillStyle('#ffffff') //字体颜色let textToWidth = ress.width / 3 * 0.3;  //字体宽度let textToHeight = ress.height / 3 * 0.9; //字体高度ctx.fillText("这是水印", textToWidth, textToHeight) // 设置字体ctx.draw(false,()=>{setTimeout(() => {//使用定时是因为制作水印需要时间，设置定时才不会出buguni.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成width: ress.width / 3,    // 画布宽height: ress.height / 3,  // 画布高canvasId: 'firstCanvas',success: (res) => {list[index].url = res.tempFilePathuni.saveImageToPhotosAlbum({//保存到手机filePath: res.tempFilePath,success: (re) => {resolve(true);}})}})}, 500)});}})})}}};
</script><style scoped lang="scss">
.wrap {padding: 30rpx;
}
</style>

注：1.样式参考uview的Upload 上传组件
组件地址
http://uviewui.com/components/upload.html
2.参考文章：
https://www.jianshu.com/p/7cb98266fc81

uni-app 实现照片水印并上传照片相关推荐

利用vant组件上传照片修改自定义上传照片样式 exif插件整理照片旋转照片添加水印
前端只能简单压缩一次,循环压缩安卓没问题 iphone 会卡死机安装exif-js cnpm i exif-js --save npm i exif-js --save 当前页面引入 import ...
html怎么上传qq空间,qq空间怎么上传照片
当我们想要把照片上传到qq空间里,应该怎么办呢?下面就让学习啦小编告诉你空间上传照片的方法,希望对大家有所帮助. 空间上传照片的方法打开QQ主界面,在主界面头像的右则有个小星星,那就是进入空间的快捷 ...
用计算机一级考试考的照片要求,全国计算机等级考试报名上传照片须知
全国计算机等级考试报名上传照片须知 2017下半年计算机等级报名预计在2017年6月举行,每年都会有部分考生由于对报考流程的不了解,造成报名失败,为了防止此类事情的发生,节约大家的时间成本,以下是百分 ...
YDOOK: Sanic: Python request post请求上传照片或文件详细具体步骤亲测可用！
YDOOK: Sanic: Python request post请求上传照片或文件详细具体步骤亲测可用! ©YDOOK JYLin 1. 项目目录架构: Upload result: 上传结果 ...
android调用系统照相机保存照片以及压缩上传下载
1.项目中遇到了许多处理图片的时候.可以直接拿过来使用.很实用.项目中用到了android 开源框架com.loopj.android.http 非常适用方便 2.以下是demo ...
exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本）
exif.js解决ios手机上传照片后显示为旋转90度问题(兼容ios13.4 ) 问题描述: 在做手机移动端app时,发现iOS12.5.1版本(iphone6)上传照片出现顺时针旋转90问题,ip ...
Android使用XUtils框架上传照片（一张或多张）和文本，server接收照片和文字（无乱码）...
Android上传图片,这里我使用了如今比較流行的XUtils框架.该框架能够实现文件上传.文件下载.图片缓存等等,有待研究. 以下是Android端上传的代码: xUtils.jar下载 Strin ...
5中打开safari_iOS13版Safari浏览器新功能上线：可调节上传照片大小
11月23日消息,据报道,配合iOS 13系统使用的Safari浏览器新增了许多人性化设定,可以根据用户的个人需求,有选择地进行使用,其中就包括可以调节上传照片大小的功能. 这项功能的使用十分便捷,用 ...
点击按钮出现图片_坪山电动车上牌丨部分手机点击拍摄按钮，页面没有反应，无法拍摄人脸图片或上传照片，为什么？...
戳蓝字关注,骑行要备案,安全常相伴大家好!我是「帮你电动车轻松上牌的」小易今天继续解答广大深圳电动车车主,在操作"易骑行"小程序进行电动车备案,以及深圳电动车上牌骑行过程中遇到的常 ...

uni-app 实现照片水印并上传照片

话不多说，直接代码

uni-app 实现照片水印并上传照片相关推荐

最新文章

热门文章