【钉钉小程序拍照+水印+保存本地+上传服务器】

最新推荐文章于 2023-09-17 14:15:15 发布

this-way

最新推荐文章于 2023-09-17 14:15:15 发布

阅读量1.1k

点赞数

文章标签：钉钉小程序 js

本文链接：https://blog.csdn.net/Un_YUI/article/details/131233241

版权

本文介绍如何在钉钉小程序中实现拍照功能，并添加自定义水印，随后将图片保存到本地及上传至服务器的完整流程。

摘要由CSDN通过智能技术生成

钉钉小程序拍照+水印+保存本地+上传服务器

axml
<canvas style="position:fixed;top:100vh;left:100vw; width:{
  {imgWidth}};height:{
  {imgHeight}};"  canvas-id="myCanvas" id="myCanvas" class="myCanvas"></canvas>
绝对定位 目的不影响页面美观

JS
// 拍照
dd.chooseImage({
      sourceType: ['camera'],
      success: (res) => {
        const filePath = res.filePaths[0];
        // 获取图片信息 宽高
        dd.getImageInfo({
          src: filePath,
          success(res) {
            dd.showLoading({content:'图片处理中...'});
            const imgWidth = res.width;
            const imgHeight = res.height;
            that.setData({imgWidth,imgHeight});
            ctx.drawImage(filePath, 0, 0, imgWidth, imgHeight);
            ctx.setFontSize(50);
            ctx.setFillStyle('red');
            ctx.setTextAlign('left');
            ctx.fillText('站址名称：&