【uniapp-小程序-分享图5/4】

utils.js

//裁剪分享的图片为5:4
const makeCanvas = (imgUrl) => {console.log("imgUrl",imgUrl);return new Promise((resolve, reject) => {// 获取图片信息,小程序下获取网络图片信息需先配置download域名白名单才能生效uni.getImageInfo({src: imgUrl,success: (imgInfo) => {let ctx = uni.createCanvasContext('canvas')let canvasW = 0let canvasH = imgInfo.height// 把比例设置为 宽比高 5:4canvasW = (imgInfo.height * 5) / 4// 为画框设置背景色,注意要放在画图前,图会覆盖在背景色上ctx.fillStyle = "#fff";if (imgInfo.width > 400 || imgInfo.height > 320) {canvasW = 400;canvasH = 320;ctx.fillRect(0, 0, canvasW, canvasH);let dWidth = canvasW / imgInfo.width; // canvas与图片的宽度比例let dHeight = canvasH / imgInfo.height; // canvas与图片的高度比例let dWH = imgInfo.width / imgInfo.height; //宽高比if (imgInfo.width > canvasW && imgInfo.height > canvasH) {if (dWH > 1 && dWH < 1.5) {ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width * dHeight) / 2,0, imgInfo.width * dHeight, imgInfo.height *dHeight)} else {if (imgInfo.width > imgInfo.height) {ctx.drawImage(imgInfo.path, 0, (canvasH - imgInfo.height *dWidth) / 2, imgInfo.width * dWidth,imgInfo.height *dWidth)}if (imgInfo.width == imgInfo.height) {ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width *dHeight) / 2, 0, imgInfo.width * dHeight,imgInfo.height * dHeight)}if (imgInfo.width < imgInfo.height) {ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width *dHeight) / 2, 0, imgInfo.width * dHeight,imgInfo.height * dHeight)}}} else {if (imgInfo.width > imgInfo.height) {ctx.drawImage(imgInfo.path, 0, (canvasH - imgInfo.height) / 2,imgInfo.width * dWidth, imgInfo.height)}if (imgInfo.width == imgInfo.height) {ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width * dHeight) / 2,0, imgInfo.width * dHeight, imgInfo.height *dHeight)}if (imgInfo.width < imgInfo.height) {ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width * dHeight) / 2,0, imgInfo.width * dHeight, imgInfo.height *dHeight)}}} else {ctx.fillRect(0, 0, canvasW, canvasH)ctx.drawImage(imgInfo.path,0,0,canvasW,canvasH,(canvasW - imgInfo.width) / 2, // 宽度从中间向两边填充0,canvasW,canvasH)}ctx.draw(false, () => {uni.canvasToTempFilePath({width: canvasW,height: canvasH,destWidth: 750, // 标准的iphone6尺寸的两倍,生成高清图destHeight: 600,canvasId: "canvas",fileType: "jpg", // 注意jpg默认背景为透明success: (res) => {console.log("res.tempFilePath",res.tempFilePath);resolve(res.tempFilePath)},fail: (err) => {console.log("err",err);reject(err)}},this)})},fail: (err) => {reject(err)}})})
}
module.exports = {makeCanvas
}

用的页面

import util from '@/common/js/util.js';
//分享到聊天onShareAppMessage() {return new Promise((resolve, reject) => {let shareMessage = {title: this.liveInfo.wx_title,path: '/subPages/livePages/liveCourse/live_course_info?courseid=' +this.courseid,imageUrl: this.liveInfo.wx_thumb || this.liveInfo.thumb};util.makeCanvas(shareMessage.imageUrl).then(imgPath => {console.log(imgPathm,'imgPath')// uni.hideLoading();resolve({title: shareMessage.title,path: shareMessage.path,imageUrl: imgPath});}).catch(err => {// uni.hideLoading();resolve(shareMessage);});})},

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

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

相关文章

tkinter电子时钟实现时间日期可实现透明无标题栏

您可以使用Python的Tkinter库来创建一个简单的电子时钟应用程序。以下是一个示例代码&#xff0c;它可以在窗口上显示当前的时间和日期&#xff0c;并且窗口是透明的且没有标题栏。 from tkinter import * import time# 创建主窗口 root Tk()# 设置窗口透明 root.attributes(…

【机器学习300问】6、什么是机器学习中的特征量?

一、首先我们看三个例子 例一&#xff1a;在辨别水果的任务中&#xff0c;人类一般会通过外观、味道、颜色等方面信息来进行区分。而机器学习则通过水果的颜色、重量、气味成分的量等被称之为“特征量”的数值来区分。 例二&#xff1a;在手写数字识别任务中&#xff0c;人类…

概率大揭秘:深度复习概率论,事半功倍的学霸秘籍!

第一章 概率论的基本概念 一、事件及其关系与运算 1、样本空间、样本点、随机事件、必然事件、不可 能事件、基本事件和复合事件的概念&#xff1b; 2、事件的包含与相等&#xff1a;若事件A包含事件B&#xff0c;则B的发生必然导致A的发生。进而有P(AB)P(B)&#xff0c;P…

什么是算法复杂度?

算法复杂度分析 数据结构有哪些&#xff1f; 数组&#xff0c;链表&#xff0c;二叉树&#xff0c;红黑树&#xff0c;散列表。 为什么要进行复杂度分析&#xff1f; 指导你编写出性能更优秀的代码 评判别人写的代码的好坏。 时间复杂度&#xff1a;代码的执行耗时 空间复…

Spark Doris Connector 可以支持通过 Spark 读取 Doris 数据类型不兼容报错解决

1、版本介绍&#xff1a; doris版本&#xff1a; 1.2.8Spark Connector for Apache Doris 版本&#xff1a; spark-doris-connector-3.3_2.12-1.3.0.jar:1.3.0-SNAPSHOTspark版本&#xff1a;spark-3.3.1 2、Spark Doris Connector Spark Doris Connector - Apache Doris 目…

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解

目录 前言 父组件传子组件 ---- props 给要传递数据的子组件绑定要传过去的属性及属性值 在子组件中使用props配置项接收 props配置项 子组件传父组件 ---- 组件的自定义事件 子组件向父组件传递数据 通过代码来绑定自定义事件 前言 本文将介绍在Vue中父子组件如何进行…

【MQTT】使用MQTT在Spring Boot项目中实现异步消息通信

目录 使用MQTT在Spring Boot项目中实现异步消息通信步骤1&#xff1a;引入MQTT库依赖步骤2&#xff1a;配置MQTT连接信息步骤3&#xff1a;创建MQTT配置类步骤4&#xff1a;发送MQTT消息发布MQTT消息消费MQTT消息 总结 前置文章&#xff1a; &#xff08;一&#xff09;MQTT协议…

基于深度学习的视觉应用

基于深度学习的视觉应用&#xff0c; 又名&#xff1a;机器视觉之从调包侠到底层开发&#xff08;第4天&#xff09; PS:这个系列是准备做从Python一些接口应用开发&#xff0c;openCV基础使用场景原理讲解&#xff0c;做一些demo案例讲解&#xff0c;然后开始数学基础复习&am…

PHP在线考试平台管理系统源码带文字搭建教程和操作手册

PHP在线考试平台管理系统源码带文字搭建教程和操作手册 技术架构 PHP7.2 Thinkphp6 React UmiJs nginx mysql5.7 cnetos7以上 宝塔面板 系统功能特性与介绍 采用PHP7强类型&#xff08;严格模式&#xff09;。 题库管理 支持多种试题类型和录题方式。 考生管理 快速导入考…

鸿蒙开发环境搭建-高频环境问题解决

1.Node版本问题 由于SDK的部分工具依赖Node.js运行时&#xff0c;推荐使用配套API版本的Node.js&#xff0c;保证工程的兼容性。 匹配关系见下表&#xff1a; API LevelNode.js支持范围API Level≤914.x&#xff08;≥14.19.1&#xff09;、16.xAPI Level>914.x&#xff0…

【Java万花筒】数据之翼:Java库助您飞跃科学计算高峰

Java数据魔法&#xff1a;探秘科学计算之道 前言 随着科技的不断发展&#xff0c;数据处理和科学计算在各行各业中扮演着愈发重要的角色。为了更高效、更准确地进行数据分析、科学计算和可视化展示&#xff0c;Java开发者广泛使用各种强大的库。本文将深入探讨几个在数据处理…

鲁迅经典名言100句

要继续调整心性&#xff0c;安静读书&#xff0c;一步一步按计划完成工作&#xff0c;然后就可以更加幸福。这个道理真简单&#xff0c;但是我从没看见谁做到过。— —《读书与跌宕自喜》 中国大约太老了&#xff0c;社会上事无大小&#xff0c;都恶劣不堪&#xff0c;像一只黑…

基于多媒体的深度学习 Midreport自我总结分析

Resistor Ohm Value Estimation Challenge 需要将误差降低到1%以下 1、调整模型架构&#xff1a;增加模型的复杂性&#xff0c;例如增加卷积层或全连接层的数量&#xff0c;增加神经元数量等 # 在 ResistorEstimator 类的 CNN 方法中进行修改 def CNN(self, type):input In…

Selenium登录网页时,不定时出现异常弹窗的四种解决方案

方案一&#xff1a;加个异常判断&#xff0c;出现了就重新登录 以下是一个简单的伪代码示例&#xff0c;展示了如何加入异常判断并重新登录&#xff1a; def login():# 登录操作if login_success:return Trueelse:return Falsedef check_usbkey_matching():# 检查当前用户与U…

【纯CSS特效源码】(一)几款漂亮的文字特效

1.渐变文字 使用background: -webkit-linear-gradient(#d8ecec, #2d888b);定义背景渐变色 并使用-webkit-text-fill-color: transparent;指定了文本字符的填充颜色 <!DOCTYPE html> <html><style>body {background-color: #111;}#content {position: abso…

通俗理解 | 波数的概念

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:波数的物理含义 揭开波数奥秘:波数的物理含义解读 通俗理解: 致力于在无需任何专业知识的前提下,从本质上理解专业的概念 背景介绍 在研究波动时,我们常会遇到一个重要物理量—…

汽车专业翻译,如何选择好的翻译公司?

随着中国汽车市场的不断壮大和国际化的步伐加快&#xff0c;众多外国汽车品牌纷纷进军中国市场&#xff0c;与此同时&#xff0c;国内汽车企业也在积极拓展海外版图。在此背景下&#xff0c;汽车企业与国际客户、供应商和合作伙伴的交流日益频繁。因此&#xff0c;拥有一支专业…

包图作业

包图作业 一. 简答题&#xff08;共2题&#xff0c;100分&#xff09; (简答题) .包依赖应该与内部关系的联系与区别 正确答案&#xff1a; 当一个包依赖于另一个是&#xff0c;这意味着两个包的内容间存在着一个或多个的关系。 例如&#xff1a;如果是一个用例包图&#xff0…

Javascript jQuery简介

✨前言✨ 1.如果代码对您有帮助 欢迎点赞&#x1f44d;收藏⭐哟 后面如有问题可以私信评论哟&#x1f5d2;️ 2.博主后面将持续更新哟&#x1f618;&#x1f389;本章目录&#x1f389; &#x1f95d;一.jQuery简介&#x1f965;二.JQeury常用API&#x1f347;1.jQeury选择…

Redis 如何做内存优化

Redis 如何做内存优化 Redis 提供了一些内存优化的手段&#xff0c;包括压缩、过期设置、分片等。下面是一些内存优化的方法和代码示例&#xff1a; 压缩存储&#xff1a; Redis 5.0 版本引入了对字符串的压缩存储功能&#xff0c;可以在字符串的存储和传输中进行压缩&#xf…