微信小程序分享的图片被裁切了。怎么让他不裁剪正常比例5:4显示

news2024/9/25 17:21:20

 现在的效果

希望的效果

 最主要的是下面的这个函数。把图片转成了5:4的临时图片

cutShareImg(doctorImg:string ){
      let that=this;
      return new Promise((resolve) => {
		wx.getImageInfo({
		  src: doctorImg,  // 这里填写网络图片路径 
		  success: (res) => {
			var data = res
			console.log(res)
			wx.createSelectorQuery()
			.select('#canvas') // 在 WXML 中填入的 id
			.fields({ node: true, size: true })
			.exec((res) => {
			   // Canvas 对象
			   console.log(res)
			  const canvas = res[0].node
			  // 渲染上下文
			  const ctx = canvas.getContext('2d')
			  let width = data.width/8;
			  let height = data.height/8;
			  let path = data.path;

			  // Canvas 画布的实际绘制宽高
			  var widths = height*5/4
			  const dpr = this.getPixelRatio();
			  console.log('dpr',dpr)
			  var w = (widths-width)/2
			  canvas.width = widths * dpr
			  canvas.height = height * dpr
			  ctx.scale(dpr, dpr)
			  ctx.clearRect(0, 0, widths, height)
			  // 图片对象
			  const image = canvas.createImage()
			  console.log(image)
			  image.onload = () => {
				// 将图片绘制到 canvas 上
				ctx.drawImage(image, w, 0,width,height)
				wx.canvasToTempFilePath({
					canvas,
					success: res => {
						// 生成的图片临时文件路径
						const tempFilePath = res.tempFilePath;
						resolve(tempFilePath)
					},
				  })
			  }
			  image.onerror = (err:any) => {
					console.log(err)
				}
			  image.src= path			 
			})
		  }
		});
       })
	  },

 页面上。使用定位让用户看不到这个绘图,但是实际上只是不出现在可视范围内

<canvas id="canvas" type="2d" style="position: absolute; top: -1000px; left: -1000px;"></canvas>

然后调用函数把你的图片换成这个临时的图片

this.setData({
    shareImg:this.cutShareImg(options.imgSrc)
})}

onShareAppMessage() {
return {
   title: '标题',
   imageUrl: this.data.shareimg,
   path: "" 
}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/170661.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 LibreOffice 将 word 转化为 pdf 并解决中文乱码问题

目录 一、安装 LibreOffice 二、解决乱码问题 2.1 查看是否安装中文字体 2.2 准备字体 2.3 导入字体 2.4 验证 项目中有一个在线上传 word 并预览 pdf 报告的需求&#xff0c;因为项目部署在 ubuntu 上面&#xff0c;所以借助libreoffice 实现 word 转 pdf&#xff0c;然…

详细实例说明+典型案例实现 对枚举法进行全面分析 | C++

第五章 枚举法 目录 ●第五章 枚举法 ●前言 1.简要介绍 2.代码及结果示例&#xff08;简单理解&#xff09; 3.生活实例 ●二、枚举法的典型案例——鸡兔同笼&质数求解 1.鸡兔同笼 2.质数求解&#xff08;枚举法&#xff09; ●总结 前言 简单的来说…

最新 vue-cli 构建项目

vue-cli 构建项目 当前使用最新版本构建一个vue node项目 插件 vue-clivueelement-plusroutervuex 安装vue-cli npm install -g vue-cli安装完后 vue --version 查看版本 vue --version创建一个项目 vue create demo这里要选择版本&#xff0c;不同版本要相组合配置的插件…

反射的基本使用

文章目录1. 一个需求引出反射2. 反射机制2.1 Java Reflection2.2 Java 反射机制可以完成2.3 反射相关的主要类2.4 反射优点和缺点2.5 反射调用优化-关闭访问检查3. Class类3.1 基本介绍3.2 Class类的常用方法3.3 获取Class类对象3.4 哪些类型有Class对象3.5 类加载3.6 类加载流…

aws imagebuilder 理解并使用imagebuilder构建pcluster自定义ami

参考资料 ec2-image-builder-workshop Troubleshoot EC2 Image Builder 理解imagebuilder imagebuilder 使用 cinc-client 进行客户端统一配置&#xff0c;CINC is not Chef&#xff0c;而是chef的免费分发版本。 https://cinc.sh/about/ imagebuilder管道的整体逻辑如下 核…

OpenHarmony如何切换横竖屏?

前言在日常开发中&#xff0c;大多APP可能根据实际情况直接将APP的界面方向固定&#xff0c;或竖屏或横屏。但在使用过程中&#xff0c;我们还是会遇到横竖屏切换的功能需求&#xff0c;可能是通过物理重力感应触发&#xff0c;也有可能是用户手动触发。所以本文主要带大家了解…

Git 代码版本管理工具详解 进厂必备

目录前言Git 概述什么是版本控制&#xff1f;为什么需要版本控制&#xff1f;版本控制工具集中式分布式Git 工作机制Git安装Git 常用命令(部分)初始化本地库设置用户签名初始化本地库查看本地库状态***工作区代码编写***添加暂存区撤销工作区的修改***提交本地库***工作区修改代…

选择排序算法的实现和优化

初识选择排序&#xff1a; 算法思想[以升序为例]&#xff1a; 第一趟选择排序时&#xff0c;从第一个记录开始&#xff0c;通过n-1次关键字的比较&#xff0c;从第n个记录中选出关键字最小的记录&#xff0c;并和第一个记录进行交换 第二趟选择排序时&#xff0c;从第二个记…

Linux学习笔记【part1】目录结构与VIM文本编辑器

Linux基础篇学习笔记 1.CentOS 7 64位安装 第一步&#xff0c;在软件选择中可以设置图形界面。 第二步&#xff0c;手动分区中设置挂载点&#xff0c;分别为引导分区、通用分区和交换区。 第三步&#xff0c;设置内核崩溃转储机制&#xff0c;这对服务器来说非常有用。 第四步…

传输层协议:TCP与UDP协议的区别

TCP和UDP有哪些区别&#xff1f; 关于TCP与UDP协议两个协议的区别&#xff0c;大部分人会回答&#xff0c;TCP是面向连接的&#xff0c;UDP是面向无连接的。 什么叫面向连接&#xff0c;什么叫无连接呢&#xff1f;在互通之前&#xff0c;面向连接的协议会先建立连接。例如&a…

网络工程师备考7章

考点分布: 注:考点不多,这个重点记住即可; 7.1 IPV4的问题与改进 7.2 IPV6的报文格式 注:版本0110表示IPV6,源地址和目的地址都是128位(bit),整个头部固定40个B(字节) 注:通信类型和流标记实际上是没有用的。负载长度是实际的报文长度,下一个头部:IPV6是可以作…

297. 二叉树的序列化与反序列化

297. 二叉树的序列化与反序列化 难度困难 序列化是将一个数据结构或者对象转换为连续的比特位的操作&#xff0c;进而可以将转换后的数据存储在一个文件或者内存中&#xff0c;同时也可以通过网络传输到另一个计算机环境&#xff0c;采取相反方式重构得到原数据。 请设计一个…

Linux:查看服务器信息,CPU、内存、系统版本、内核版本等

还是最近工作的总结&#xff0c;性能验证要根据服务器的配置才能做进一步的结论论证&#xff0c;废话不多说 目录查看Linux内核版本查看Linux系统版本CPU查看CPU信息&#xff08;型号&#xff09;物理CPU个数每个物理CPU中core的个数(即核数)查看逻辑CPU的个数内存查看内存信息…

【C语言航路】第十三站:动态内存管理

目录 一、为什么存在动态内存分配 二、动态内存函数 1.内存的分区 2.malloc和free &#xff08;1&#xff09;malloc和free库函数文档 &#xff08;2&#xff09;malloc和free的使用 2.calloc &#xff08;1&#xff09;calloc的库函数文档 &#xff08;2&#xff09;c…

模糊图像检测(c++)

Opencv-模糊检测 - 知乎图像清晰度&#xff0c;是指影像上各细部影纹及其边界的清晰程度。 解决问题&#xff1a;由于前端摄像机视频中聚焦不当&#xff0c;异物遮挡等原因&#xff0c;所引起的画面视野图像模糊的现象。 算法原理&#xff1a;将彩色图像转化为灰度图像&#xf…

Python深度学习基础(九)——深入浅析卷积核

深入浅析卷积核引言单通道卷积简单图像边缘检测锐化高斯滤波引言 提到卷积&#xff0c;应该多数人都会想到类似上图的这种示例&#xff0c;可以简单的理解成卷积核与图像中和卷积核相同大小的一块区域与卷积核相乘再求和&#xff0c;通过移动区域产生一个有和组成的新的图像&am…

黑马学ElasticSearch(十二)

目录&#xff1a; &#xff08;1&#xff09;ES集群-集群结构介绍 &#xff08;2&#xff09;es集群-搭建集群 &#xff08;3&#xff09;es集群-集群职责及脑裂 &#xff08;4&#xff09;es集群-分布式新增和查询流程 &#xff08;5&#xff09; es集群-故障转移 &#…

传输层协议:TCP协议(下)——运作方式(如何三次握手、四次挥手等)

运作方式 TCP协议的运行可划分为三个阶段&#xff1a;连接创建(connection establishment)、数据传送&#xff08;data transfer&#xff09;和连接终止&#xff08;connection termination&#xff09;。操作系统将TCP连接抽象为套接字表示的本地端点&#xff08;local end-p…

【PyTorch】教程:学习基础知识-(6) Autograd

AUTOMATIC DIFFERENTIATION WITH torch.autograd 在训练神经网络时&#xff0c;最常用的算法是反向传播算法&#xff0c;在该算法中&#xff0c;参数根据损失函数相对于给定参数的梯度进行调整。 为了计算这些梯度&#xff0c; PyTorch 有一个内置的微分引擎 torch.autograd …

2022秋招算法岗面经题:训练模型时loss除以10和学习率除以10真的等价吗(SGD等价,Adam不等价)

问题描述&#xff1a;训练深度学习模型时loss除以10和学习率除以10等价吗&#xff1f; 先说结论 这个问题的答案与优化器有关 使用Adam、Adagrad、RMSprop等带有二阶动量vtv_tvt​的优化器训练时&#xff0c;当我们将loss除以10&#xff0c;对训练几乎没有影响。使用SGD、Mo…