企业网站建设2017,企业标准,给企业做网站多少钱,建筑建设网站建设遇到个需求需要实现#xff0c;研究了一下后写了个demo
本质上就是把拍完照后的照片放到canvas里#xff0c;然后加上水印样式然后再重新生成一张图片
代码如下#xff0c;看注释即可~使用的话记得还是得优化下代码
templateview classcontent研究了一下后写了个demo
本质上就是把拍完照后的照片放到canvas里然后加上水印样式然后再重新生成一张图片
代码如下看注释即可~使用的话记得还是得优化下代码
templateview classcontentbutton clickhandlePhotoAndWatermask测试按钮/button!-- uni-app必须要有一个canvas元素 --!-- 所以在这里放置一个并且将它隐藏起来 --view styleposition: absolute; left: 9999pxcanvascanvas-idmyCanvas:style{ width: ${canvasWidth}px, height: ${canvasHeight}px }/canvas/view/view
/templatescript
export default {data() {return {canvasWidth: 300,canvasHeight: 150,}},methods: {handlePhotoAndWatermask() {// 调用拍照功能uni.chooseMedia({mediaType: [image],sourceType: [camera],maxDuration: 30,camera: back,success: (res) {const filePath res.tempFiles[0].tempFilePath// 获取图片宽高uni.getImageInfo({src: filePath,success: ({ width, height }) {// 将canvas的宽高置成同样的宽高this.canvasWidth widththis.canvasHeight height// 用this.$nextTick不行第一次还是会按默认的300 * 150截取// setTimeout时间也不能太短500ms左右setTimeout(() {const ctx uni.createCanvasContext(myCanvas)// 将图片放到canvas中ctx.drawImage(filePath, 0, 0, width, height)// 加上想要绘制的水印ctx.font 50px system-uictx.fillStyle redctx.fillText(测试写入, 20, 100)ctx.draw()// 将canvas转化成图片uni.canvasToTempFilePath({canvasId: myCanvas,width: this.canvasWidth,height: this.canvasHeight,success: ({ tempFilePath }) {// 可以对生成的图片做你需要的操作uni.previewImage({current: 0,urls: [tempFilePath],})},})}, 500)},fail() {console.error(获取图片详情失败)},})},})},},
}
/script最终展示效果如下~ PS: 这个只是小程序版不过App端也是类似的实现方式~
