如何将pc端排版好的h5页面等比缩放到移动端
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将pc端排版好的h5页面等比缩放到移动端相关的知识,希望对你有一定的参考价值。
您好,pc端和移动端比例适配不同,一般需要单独排版了,如果使用coolsite360进行网页编辑制作,可以实现响应式网页布局,实现移动,pad,pc三端适配,希望可以帮到楼主。 参考技术A 都可以的,主要是看你把样式设置成什么样子的,像兔展这种类型的工具制作出来的h5页面,只适合在移动端展示。uniapp微信小程序图片裁剪插件,支持自定义尺寸定点等比例缩放拖动图片翻转剪切圆形/圆角图片定制样式
qf-image-cropper2.0
图片裁剪插件
1.效果预览:
2.平台支持:
1.支持微信小程序(移动端、PC端、开发者工具)
2.H5平台
3.其他平台暂未测试兼容性未知
3.支持功能:
1.自定义裁剪尺寸
2.定点等比例缩放:移动端以双指触摸中心点为缩放中心点,PC端以鼠标所在点为缩放中心点
3.自由拖动:支持限制滑出边界,也支持回弹效果(滑动时可滑出边界,释放时回弹到边界)
4.图片翻转:在裁剪尺寸非 1:1 的情况下,翻转时宽高无法铺满裁剪区域时,图片会自动放大到合适尺寸
5.裁剪生成新图片
6.本地选择图片
7.可定制样式:可自由选择是否渲染裁剪边框、可伸缩裁剪顶角、参考线
8.裁剪圆角图片:圆形、圆角矩形
4.属性说明
属性名 | 类型 | 默认值 | 说明 |
src | String | 图片资源地址 | |
width | Number | 300 | 裁剪宽度 |
height | Number | 300 | 裁剪高度 |
showBorder | Boolean | true | 是否绘制裁剪区域边框 |
showGrid | Boolean | true | 是否绘制裁剪区域网格参考线 |
showAngle | Boolean | true | 是否展示四个支持伸缩的角 |
areaScale | Number | 0.3 | 裁剪区域最小缩放倍数 |
maxScale | Number | 5 | 图片最大缩放倍数 |
bounce | Boolean | true | 是否有回弹效果:拖动时可以拖出边界,释放时会弹回边界 |
rotatable | Boolean | true | 是否支持翻转 |
choosable | Boolean | true | 是否支持从本地选择素材 |
angleSize | Number | 20 | 四个角尺寸,单位px |
angleBorderWidth | Number | 2 | 四个角边框宽度,单位px |
radius | Number | 裁剪图片圆角半径,单位px | |
@crop | EventHandle | 剪裁完成后触发,event = tempFilePath 。在H5平台下,tempFilePath 为 base64 |
5.引入插件
项目代码:Homilier / qf-image-cropper · GitCode
使用HBuilder X导入项目 :图片裁剪插件 - DCloud 插件市场
6.基本用法
<template>
<div>
<qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop"></qf-image-cropper>
</div>
</template>
<script>
import QfImageCropper from '@/components/qf-image-cropper/qf-image-cropper.vue';
export default
components:
QfImageCropper
,
methods:
handleCrop(e)
// 保存到相册
uni.saveImageToPhotosAlbum(
filePath: e.tempFilePath
)
</script>
7.其他说明
1.该2.0版本基于我之前的1.0版本进行重构。
2.uniapp编译到小程序后如果出现布局错乱则尝试重新编译。
目前uniapp对于`<script lang="wxs" ></script>`的编译可能还存在一定问题,会偶尔出现没有正确将外部引入的wxs编译到生成的代码中导致引用为undefined。
以上是关于如何将pc端排版好的h5页面等比缩放到移动端的主要内容,如果未能解决你的问题,请参考以下文章