uni-app微信小程序canvas中使用canvasToTempFilePath在手机上导出图片尺寸与实际不符

news/2024/7/20 1:37:38 标签: 微信小程序, 小程序, uni-app, 前端, javascript

问题描述:比如图片的尺寸是1125*2001像素,这样用微信开发者工具下载下来的图片尺寸是1125*2001像素,用不同的手机去操作,下载出来的图片尺寸都不一样,和原图片尺寸差距很大。

解决方案:canvas写入的时候是按照当前设备像素比(pixelRatio)进行设置的,像素比pixelRatio=物理像素/设备独立像素(dips)

像素比pixelRatio=物理像素/设备独立像素(dips)

ctx.drawImage(图片对象, 图像裁剪的x位置, 图像裁剪的y位置, 裁剪的宽度, 裁剪的高度, x位置, y位置, 宽度, 高度

我这台机器的设备像素比=3,分辨率是:1920*1080 以x轴为例,这里的物理像素=1920,得出设备独立像素=1920/3=640,而canvas这里设置的大小是设备独立像素,所以576的物理像素对应到设备独立像素就是=576/3=192,

小程序>微信小程序提供了wx.getSystemInfo获取设备信息,其中pixelRatio就是设备像素比.

canvas写入的时候是按照当前设备像素比(pixelRatio)进行设置的

<button class="btn-link save-link" plain="true" @click="getCanvas">
保存图片
</button>    
<!--  canvas保存图片  -->
<canvas class="share-canvas" canvas-id="canvas" :style="canvasStyle"></canvas>
  data() {
    return {
      posterImg: {
        url: 'https://picsum.photos/1125/2001?random=1',
        width: '1125rpx',
        height: '2001rpx'
      }
    }
  },
computed: {
    canvasStyle() {
      return `width: ${this.posterImg.width}px; height:${this.posterImg.height}px;`
    }
},
methods: {
    getCanvas() {
      uni.showLoading({
        title: '保存中' // 加载转圈显示
      })
      const ctx = uni.createCanvasContext('canvas', this)
      const that = this
      // 获取背景海报详细信息
      uni.getImageInfo({
        src: that.swiper2List[that.current].image,
        success: function(res) {
          // 小程序>微信小程序提供了wx.getSystemInfo获取设备信息,其中pixelRatio就是设备像素比
          wx.getSystemInfo({
            success: function(data) {
              // canvas写入的时候是按照当前设备像素比(pixelRatio)进行设置的
              const pixelRatio = data.pixelRatio
              that.posterImg.width = res.width / pixelRatio
              that.posterImg.height = res.height / pixelRatio
              // 绘制背景海报
              ctx.drawImage(res.path, 0, 0, that.posterImg.width, that.posterImg.height)
              that.saveCanvas()
            }
          })
        }
      })
    },
    // 保存canvas为图片
    saveCanvas() {
      const _this = this
      setTimeout(() => {
        uni.canvasToTempFilePath({
          canvasId: 'canvas',
          quality: 1,
          success(result) {
            // 保存在本地
            uni.saveImageToPhotosAlbum({
              filePath: result.tempFilePath,
              success: function() {
                uni.hideLoading()
                uni.showToast({
                  title: '保存成功',
                  icon: 'success',
                  duration: 2000
                })
                console.log('save success')
              },
              fail: () => {
                uni.hideLoading()
                _this.setData({
                  flag: false
                })
              }
            })
          },
          fail: () => {
            uni.hideLoading()
            // 重复请求一次
            _this.saveCanvas()
          }
        })
      }, 200)
    }
  }

http://www.niftyadmin.cn/n/5036010.html

相关文章

RK3588平台开发系列讲解(项目篇)视频监控之RTMP推流

文章目录 一、RTMP协议是什么二、RTMP 的原理三、Nginx 流媒体服务器四、FFmpeg 推流沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 目前常见的视频监控和视频直播都是使用了 RTMP、RTSP、HLS、MPEG-DASH、WebRTC流媒体传输协议等。 视频监控项目组成,分为三部分:…

揭秘Spring Boot内嵌Tomcat原理

tomcat 介绍 tomcat 是 web容器&#xff08;servlet 容器&#xff09;&#xff0c;不管请求是访问静态资源HTML、JSP还是java接口&#xff0c;对tomcat而言&#xff0c;都是通过servlet访问&#xff1a; 访问静态资源&#xff0c;tomcat 会交由一个叫做DefaultServlet的类来处…

java框架-Spring-AOP

AOP:动态代理 开发步骤&#xff1a; 导入aop模块定义业务逻辑类定义切面类&#xff1b; -. 切面类标注&#xff1a;Aspect -. 切面类注解&#xff1a; Before: 前置通知, 在方法执行之前执行 After: 后置通知, 在方法执行之后执行 。 AfterRunning: 返回通知, 在方法返回结果之…

04-Docker应用部署

MySQL部署 需求 在Docker容器中部署MySQL&#xff0c;并通过外部MySQL客户端操作MySQL Server 实现步骤 搜索MySQL镜像 docker search mysql拉取MySQL镜像 docker pull mysql:5.6创建MySQL容器、设置端口映射、目录映射 # 在/root目录下创建mysql目录用于存储mysql数据信息 mk…

【前端打怪升级日志之微前端框架篇】微前端qiankun框架子应用间跳转方法

参考链接qiankun官网&#xff1a;微应用之间如何跳转&#xff1f; 1.主应用、子应用路由都是hash模式 主应用根据 hash 来判断微应用&#xff0c;无需考虑该问题 2.主应用根据path判断子应用 方法实现适用条件参数传递存在问题a标签跳转<a href"/toA"></…

OSCP系列靶场-Intermediate-BTRSys2.1保姆级

OSCP系列靶场-Intermediate-BTRSys2.1 目录 OSCP系列靶场-Intermediate-BTRSys2.1总结准备工作信息收集-端口扫描目标开放端口收集目标端口对应服务探测 信息收集-端口测试21-FTP端口的信息收集21-FTP版本版本信息与MSF利用21-FTP端口匿名登录测试(成功)21-FTP端口-文件GET收集…

Zipping

Zipping 信息收集端口扫描目录扫描webbanner信息收集 漏洞利用空字节绕过---->失败sqlI-preg_match bypass反弹shell 稳定维持 提权-共享库漏洞 参考&#xff1a;https://rouvin.gitbook.io/ibreakstuff/writeups/htb-season-2/zipping#sudo-privileges-greater-than-stock-…

Postman应用——Headers请求头设置

文章目录 Header设置Header删除或禁用Header批量编辑Header预设添加 一般在接口需要校验签名时&#xff0c;Headers请求头用来携带签名和生成签名需要的参数&#xff0c;在Postman也可以设置请求头在接口请求时携带参数。 Header设置 说明&#xff1a; Key&#xff1a;Header…