前端uniapp中获取图片宽高 并转换为mm

最新推荐文章于 2024-07-12 16:55:56 发布
最新推荐文章于 2024-07-12 16:55:56 发布
阅读量1.1k 收藏 8
点赞数 6
文章标签： 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43193513/article/details/134662037
版权 
			uni.getImageInfo({
				src: "https://zjz-1254115331.cos.ap-beijing.myqcloud.com/20231128/656547269e5111701136166.jpg",
				success: function(image) {
					let getWindowInfo = uni.getWindowInfo()
					console.log("image", image);
					const mmWidth = (image.width / 300) * 25.4;
					const mmHeight = (image.height / 300) * 25.4;
					console.log("mmWidth", Math.round(mmWidth));
					console.log("mmHeight", Math.round(mmHeight));
				}
			});
帅过二硕ฅ
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app 组件里面获取元素宽高的实现
10-15
主要介绍了uni-app 组件里面获取元素宽高的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp获取图片高度
weixin_44309299的博客
04-08 369
注意：要等图片渲染完成异步去获取。
【uni-app】动态计算图片高度且保持宽高比
sayyy的专栏
09-23 4620
前言 图片容器宽度已确定 图片加载后，将图片容器按照图片的宽高比设置高度 思路 图片容器宽度已确定。 uni-app的image组件，将mode设置为scaleToFill（不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素）。 uni-app的image组件提供了@load事件。在@load事件中可以获得图片的宽、高。 获得图片的宽、高后，计算图片容器的高度。 使用内联样式，为图片容器设置图片高度。图片容器的宽高比与图片的宽高比一致。 操作步骤 image组件设置：mode设置为
vue、uni-app剪裁图片
yk514085776的博客
04-27 2782
图片剪裁 1.先算出手机屏幕屏幕的大小，screen_height,screen_width; 2.加载图片，获取图片的宽高，根据图片的宽高比，保留一定的边距，缩放图片可以完整显示在屏幕； 3.已显示图片的宽度和高度，作为容器（cropperW，cropperH），里面的图片和剪裁区域上下叠加，底层显示图片，上面显示裁剪区域 4.裁剪区域，在初始根据cutL,cutT,cutB,cutR,显示在容器的位置； 5.通过移动剪裁区域，确定最终的剪裁区域，根据cutL，cutT，确定cavas画布剪.
【uni-app】动态计算图片高度
sayyy的专栏
09-11 3210
前言 要求图片加载后，保持宽高比（16：9）且充满图片区 使用uni-app的image组件，将mode设置为scaleToFill（不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素） 思路 页面渲染完成后，获取图片的宽度 根据图片的宽度，要保持16：9时的高度 使用内联样式，为图片设置图片高度 操作步骤 获取图片的宽度，并计算图片的高度 <script> export default{ data() { return { image
uniapp 获取图片的高度_uni-app获取元素高度等信息，并设置元素top信息
weixin_28835789的博客
01-12 4417
本文主要简介uni-app获取元素信息及设置信息等获取元素高度可查看官方文档mounted() {const query = uni.createSelectorQuery().in(this);query.select('#editor').boundingClientRect(data => {console.log(data)}).exec();},这里的data用于获取这个元素大小及...
uniapp 获取图片的高度_uniapp自定义切图
weixin_42306480的博客
02-04 2365
预览效果下图是发送到朋友圈的效果刚刚删除选择图片导出切片1.选择图片后，可浏览效果图2.导出图片，可保存文件到本地3.将所有九宫格图片分享到朋友圈var arr=[];import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";export default {components: {kpsImag...
uniapp海报内容并生成海报二维码图片（可拖拽，可调节大小）
10-19
总的来说，uniapp自定义海报的实现涉及到canvas绘图、触摸事件处理、二维码生成等多个技术点，对于提升前端开发者在移动应用开发中的技能和灵活性具有很大的帮助。通过实践和学习，开发者可以创造出更多满足用户需求...
uniapp vue 马赛克
07-01
在IT行业中，尤其是在前端开发领域，`uniapp` 和 `vue` 是两个非常重要的工具。`uniapp` 是一个基于 Vue.js 的多端开发框架，它允许开发者编写一次代码，就可以发布到iOS、Android、Web（H5）、微信小程序、支付宝小...
uniapp实现移动端上传文件功能
09-24
在移动应用开发中，文件上传是一项常见的功能，尤其在社交、云存储以及各种服务类应用中，用户常常需要上传图片、文档等数据。uniAPP，作为一个跨端开发框架，为开发者提供了便捷的方式来实现移动端的文件上传功能。...
uniapp开发蓝牙适配佳博打印指令（esc,tsc）js
02-17
在JavaScript中，你可能需要创建一个字符串，将TSC命令转换为ASCII字符，然后通过uni-app的蓝牙接口发送到打印机。 3. **uni-app的蓝牙接口**：uni-app提供了`wx.BluetoothAdapter`对象来处理蓝牙设备的连接、扫描...
微信小程序实现 用canvas 生成图片 并保存
01-24
1. **wx.getImageInfo**：用于获取图片信息，包括图片的宽、高以及本地临时路径。在生成图片前，可能需要先加载用户的微信头像，这个API能帮助我们预处理图片。 2. **wx.createSelectorQuery**：这是一个选择器查询...
uni-app获取图片尺寸，动态调节宽高，图片尺寸问题，js
m0_49578914的博客
03-30 9269
在用户上传的图片宽高不可控的情况下，我们进行展示的时候就会出现出尺寸不适的情况，首先用到官方给的方法**uni.getImageInfo（）**方法获取到图片的宽高，然后我们给定自己要设置的宽度，进行计算以及动态赋值即可，上图 页面样式赋值，以及效果图 ...
uniapp 图片按规定尺寸展示
weixin_56127412的博客
05-16 2359
例如：长图按照图1，宽图按照图2 图1： 图2： 废话不多说直接上代码 html代码： <image :src="v.imagesArr[0]" :class="[v.isWidth?'discussion_imgs3':'discussion_imgs4']" mode="aspectFill"></image> css代码 // 宽图 .discussion_imgs3{ width: 410rpx; height: 310rpx; ..
uniapp-轮播图swiper根据内容图片高度自适应，解决获取图片高度不准确的问题
个人博客
07-19 1615
到是能解决，但是不稳定，有时200ms能正确，有时不能，再设置久一点，用户体验不好，图片等待时间太久了。获取图片高度，但返回的图片高度还是不正确，太坑了，但load里再使用。的方法获取图片高度不正确，比如图片是100，获取是200，需求：轮播图swiper根据内容图片高度自适应。研究了一下，图片加载完成时间@load里，也能。的方法获取图片高度则正确了。但是通过uniapp。
【uni-app】小程序使用getImageInfo和widthFix实现图片按自身尺寸展示
徐海东的博客
03-23 7238
场景：uni-app编译微信小程序图片在不设定高度宽度样式时有默认宽高（如下图），即使设置了image图片的mode属性也无法让图片按自身宽高展示。这种场景在非固定宽高的渲染网络图片时会遇到 思路：使用uni.getImageInfo方法获取图片信息宽高，然后再赋值渲染 #uni.getImageInfo(OBJECT) OBJECT 参数说明 参数名 类型 必填 说明 src String 是 图片的路径，可以是相对路径，临时文件路径，存储文件路
动态获取图片尺寸-uniapp
weixin_45554952的博客
06-18 2169
uni.getImageInfo({ src: res.tempFilePaths[0], success: function (image) { console.log(image.width); console.log(image.height); } }); res.tempFilePaths[0]就是图片的链接，可根据
uni-app：canvas-绘制图形4（获取画布宽高，根据画布宽高进行图形绘制）
weixin_46001736的博客
09-27 1585
uni-app：canvas-绘制图形3（获取画布宽高，根据画布宽高进行图形绘制）
OpenSNN推文：近期优质博客推荐汇总
最新发布
opensnn的博客
07-12 373
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
uniapp中nvue里怎样把上传的视频通过前端获取第一帧，并第一帧图片保存到后端
06-09
要实现在uniapp中nvue页面中将上传的视频通过前端获取第一帧，并将第一帧图片保存到后端，可以按照以下步骤进行： 1. 在nvue页面中使用uniapp的上传组件将视频上传到前端。 2. 在nvue页面中使用uniapp的canvas组件将视频的第一帧画面绘制到canvas上。 3. 将canvas上的第一帧画面转换为图片，并将图片上传到后端服务器。 4. 在后端服务器端，将保存的第一帧图片的路径返回给前端。 5. 在前端将保存的第一帧图片的路径保存到数据库或其他存储介质中，以备后续使用。 下面是一个示例代码片段，用于在nvue页面中将上传的视频获取第一帧并将第一帧图片保存到后端服务器： ```html <!-- nvue页面中的模板代码 --> <template> <view> <canvas id="myCanvas" style="width:100%; height:100%;"></canvas> <input type="file" name="file" @change="uploadVideo" /> </view> </template> ``` ```javascript // nvue页面中的脚本代码 <script> export default { methods: { uploadVideo(event) { // 获取上传的视频文件 const file = event.target.files[0]; // 创建video对象，并加载视频文件 const video = uni.createVideoContext('myVideo'); video.src = URL.createObjectURL(file); // 监听视频加载完成事件，获取第一帧画面并转换为图片 video.onLoadedmetadata(() => { // 获取canvas对象 const canvas = uni.createCanvasContext('myCanvas', this); canvas.drawImage(video, 0, 0, canvasWidth, canvasHeight); canvas.draw(false, () => { // 将canvas上的画面转换为图片 uni.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { // 将图片上传到后端服务器 uni.uploadFile({ url: 'http://example.com/upload', filePath: res.tempFilePath, name: 'file', success: (res) => { // 将保存的第一帧图片的路径保存到数据库或其他存储介质中 const imageUrl = res.data.imageUrl; console.log(imageUrl); }, fail: (err) => { console.log(err); } }); }, fail: (err) => { console.log(err); } }); }); }); } } } </script> ``` 在上述示例代码中，`uploadVideo`函数用于处理上传视频文件的逻辑，其中通过创建video对象并加载视频文件，监听视频加载完成事件，获取第一帧画面并转换为图片，最终将图片上传到后端服务器，并将保存的第一帧图片的路径保存到数据库或其他存储介质中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值