vue中调用设备底层功能（照相机）获得base64数据并立刻发送请求

最新推荐文章于 2024-11-02 15:29:16 发布

Dking222

最新推荐文章于 2024-11-02 15:29:16 发布

阅读量419

点赞数

分类专栏： vue 技术件的使用文章标签： vue

本文链接：https://blog.csdn.net/weixin_47686269/article/details/109157571

版权

在Vue应用中，可以通过创建Utils文件夹并在Tools.js中编写代码来调用设备底层的照相机功能，从而获取图片的Base64数据。这些数据可以用于在网页上直接显示图片。文章提供了Base64编码的数据格式示例，并通过一个小型的Demo演示了如何调用相机并展示获取到的Base64图像。

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

vue中调用设备底层功能（照相机）并展示
首先在src根目录下创建utils文件夹，复制以下代码，文件名Tools.js

class Tools {
   
  static reduceImgSize = (file, maxWidth = 800, maxHeight = 800) => {
   
    return new Promise((reslove, rej) => {
   
      let img = new Image();
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");
      img.onload = function() {
   
        const originWidth = this.width;
        const originHeight = this.height;
        let targetWidth = originWidth,
          targetHeight = originHeight;
        // 图片尺寸超过maxWidth x maxHeight的限制
        if (originWidth > maxWidth || originHeight > maxHeight) {
   
          if (originWidth / originHeight > maxWidth / maxHeight) {
   
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
          } else {
   
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
          }
        }
        // 清除画布
        // 图片压缩
        //判断宽高大小来旋转画布
        if (targetHeight > targetWidth) {
   
          canvas.width = targetHeight;
          canvas.height = targetWidth;
          context.translate(0, targetWidth);
          context.rotate((-90 * Math.PI) / 180);
          context.clearRect(0, 0, targetWidth, targetHeight);
        } else {
   
          canvas.width = targetWidth;
          canvas.height = targetHeight;
          context.clearRect(0, 0, targetWidth, targetHeight);
        }
        context