微信小程序 获取经纬度、图片加水印

本文主要是介绍微信小程序 获取经纬度、图片加水印，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

PS：水印部分未经测试，有待考究。

经纬度

  const queryAuthority = () => {
    // 可以通过 Taro.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
    Taro.getSetting({
      success: function (res) {
        if (!res.authSetting["scope.userLocation"]) {
          Taro.authorize({
            scope: "scope.userLocation",
            success: function () {
              // 用户已经同意小程序使用录音功能，后续调用 Taro.startRecord 接口不会弹窗询问
              queryLocation();
            },
            fail: () => {
              rejectModal();
            },
          });
        } else {
          queryLocation();
        }
      },
    });
  };
  
  const rejectModal = () => {
    Taro.switchTab({
      url: `../workOrder/index`,
    });
    Taro.showModal({
      title: "提示",
      content: "请开启定位权限后重试",
      success: () => {
        Taro.openSetting();
      },
    });
  };

  const queryLocation = () => {
    Taro.getLocation({
      type: "gcj02",
      success(res) {
        changeLocation(res);
      },
      fail: (e) => {
        console.log(e);
      },
    });
  };

水印

// url:微信小程序图片临时路径，myUrl:添加水印后的图片临时路径
const myUrl = await addWatermark(url);
// 以下是由前端上传图片的代码 （diss公司，这种事居然让前端做）
const imgBuffer = fileSystemManager.readFileSync(url);
const suffix = url.slice(url.lastIndexOf(".") + 1);
const rs = await Taro.request({
  url: data.payload,
  header: {
    "content-type": fileType[suffix],
  },
  method: "PUT",
  data: imgBuffer,
});
if (rs.statusCode === 200) {
  fileObj.file.path = data.payload.substr(0, data.payload.indexOf("?"));
  oldFiles.push(fileObj);
} else {
  error = rs;
}

// 分割线

const addWatermark = async (url: string) => {
  if (!location.latitude) {
    return url;
  }
  return new Promise(async (resolve) => {
    const imgInfo = await Taro.getImageInfo({ src: url });
    let width = imgInfo.width;
    let height = imgInfo.height;
    const realRatio = width / height;
    const systemInfo = Taro.getSystemInfoSync();
    const { windowWidth: screenWidth, pixelRatio: dpr } = systemInfo;
    width = screenWidth;
    height = screenWidth / realRatio;
    canvasNode.width = width * dpr;
    canvasNode.height = height * dpr;
    canvasCtx.scale(dpr, dpr);
    const Img = canvasNode.createImage();
    Img.src = url;
    Img.onload = async () => {
      canvasCtx.drawImage(Img, 0, 0, width, height);
      canvasCtx.fillStyle = "white";
      canvasCtx.font = 9;
      canvasCtx.fillText(moment().format("YYYY/MM/DD HH:mm:ss"), 0, 10);
      canvasCtx.fillText(location.address, 0, 20);
      Taro.canvasToTempFilePath({
        canvas: canvasNode,
        success: function (res) {
          resolve(res.tempFilePath);
        },
      });
    };
  });
};

这篇关于微信小程序 获取经纬度、图片加水印的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！