uniapp-拍照加水印

需求：拍照，给照片加水印

<template><uni-icons @click="showCamera" type="camera" size="28"></uni-icons>    //拍照<view style="position: absolute;top: -999999px;">    //把canvas移出视窗<canvas :style="{'width':w,'height': h}" canvas-id="firstCanvas"></canvas></view>
</template>

data：

data() {return {w:'',h:'',}
},

methods：

showCamera() {let _self = this;uni.chooseImage({// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有count: 1,sourceType: sourceType, //相机success: function (res) {uni.showLoading({title: '制作水印中...'})_self.w = 300+'px';    //宽度_self.h = 500+'px';    //高度let ctx = uni.createCanvasContext('firstCanvas');    /** 创建画布 *///将图片src放到cancas内，宽高为图片大小ctx.drawImage(res.tempFilePaths[0], 0, 0, 300, 500)ctx.setFontSize(18)ctx.setFillStyle('#ff0000')    //水印颜色ctx.rotate(0);let clientNameWidth = 10;let clientNameHeight = 20    //内容1高度ctx.fillText('水印内容1', clientNameWidth, clientNameHeight)let clientIdWidth = 10let clientIdHeight = 40    //内容2高度ctx.fillText('水印内容2', clientIdWidth, clientIdHeight)let timeWidth = 10;let timeHeight = 60;    //内容3高度ctx.fillText('水印内容3', timeWidth, timeHeight)ctx.draw(false,()=>{setTimeout(() => {    //合成延迟uni.canvasToTempFilePath({canvasId: 'firstCanvas',    //canvas-idsuccess: (res1) => {// console.log(res1)uni.saveFile({tempFilePath: res1.tempFilePath,success: function (res2) {console.log(res2)    //打印图片地址uni.hideLoading()},fail:(e)=>{uni.hideLoading()uni.showToast({title: "水印合成失败",icon:'none'})}});}});}, 500);});}})
},

uniapp-拍照加水印相关推荐

视频录像拍照加水印在线文档编辑
主题:最近又学到的知识吧,虽然以前也有做过这次记录一下一 .场景1:视频录像拍照加水印知识点: 1.用标签<video>, navigator.mediaDevices.getUse ...
uniApp图片加水印
这个代码直接拿走运行没啥大问题,但是,建议开发的时候,如果遇到加水印,别多选图片,没找到什么原因,就是绘制的不理想,一张一张来,可以 <template><view class=&q ...
uni-app图片加水印；小程序图片添加水印；使用canvas上传图片加水印
原博主:点击查看需求: 微信小程序,上传图片,成功后图片有水印,既图片的网络地址也有水印. 上传图片使用uni-app的uni.chooseImage()方法,水印是用canvas. 以下代码可以直 ...
微信小程序拍照加水印
根据上次 1.wxml代码: 因为拍照要到指定位置显示,这里的canvas我想隐藏,就用了css:position:fixed;left: 10000rpx.之前尝试过hidden='true'或者d ...
（uniapp）h5图片加水印
写一个uniapp图片加水印,限于h5,当然小程序和App也是可以的,只是返回的不一样,这里是可以在H5用的,然后可以拿到加完水印的图片,废话不多说: 第一步拿到你要加水印的图片地址,先用canvas ...
Android实现图片加水印，视频水印
Android实现图片加水印,视频加水印推荐经典用例,超级简单的视频加水印,图片加水印功能. 视频加水印: Android拍视频加水印功能图片加水印 Android轻松实现拍照加水印
uni-app如何对拍摄的照片加水印？
最近一个项目需求:对拍摄的照片或者手机中选择的照片加水印进行处理,通过研究,我们知道uview的插件市场中有很多这样的组件,地址是https://ext.dcloud.net.cn/search,可以 ...
手绘线条图画机器人_怎么把照片转换成手绘图画？怎么加水印？
怎么把照片转换成手绘图画?附讲加水印mp.weixin.qq.com 先来个转换前后的对比图手机下载美图秀秀(一定要用手机下载,电脑端没有绘画机器人功能). 点开美图秀秀后,在页面右下方点击&qu ...
在线免费给图片添加水印，图片加水印方法教程！
有时候,我们需要办理各种证件,办理时都需要出示身份证复印件及原件,那么为了防止"有心人"盗用我们的证件,在复印身份证的时候建议大家都给此复印件添加水印会比较好,比如加上:办理*** ...
图片如何加水印？教你几招轻松加
相信很多喜欢出门游玩的小伙伴,会习惯将旅途中遇到的风景.趣事将其拍照记录下来,然后将图片分享到社交账号上去,但是互联网上什么人都有,总会有不怀好意的人,会在网上拿别人辛苦拍摄的照片,据为己有去发布,这 ...

uniapp-拍照加水印

需求：拍照，给照片加水印

data：

methods：

uniapp-拍照加水印相关推荐

最新文章

热门文章