uniapp使用vue-img-cutter(下)

暮雪...

已于 2023-10-10 11:20:14 修改

阅读量114

点赞数

分类专栏： uniapp 文章标签： uni-app

于 2023-10-10 11:15:58 首次发布

本文链接：https://blog.csdn.net/qq_22071421/article/details/133741849

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上面已经实现了vue-img-cutter的基本功能，但是在实际测试中，缩放功能中展示的图片压缩比例极低，打开图片展示模糊，截出来的文件模糊。

因为html在pc端是绝对像素渲染，但是在移动端，无论是通过uniapp提供的uni.getSystemInfo(options)方法或者是提供js的window.screen.width获取到的分辨率都是渲染分辨率，不是物理分辨率，但是可以通过uniapp的uni.getSystemInfo(options)返回值中可以获取到设备像素比和屏幕分辨率，两数相乘即为物理分辨率，比如：实际宽=screenWidth*pixelRatio。

所以需要在之前的基础上进行修改。

uniapp：

uniapp的文件内容不变，获取到相关参数，将宽高和设备像素比传入到webview中。

vue项目：

获取到url中的信息，需要更改viewport的内容:width为设备宽度，指定initial-scale的缩放比例

<meta name="viewport" content="width=device-width, initial-scale=xxx, user-scalable=no" />

不同设备设备像素比可能不同，通过计算写入头部。

将index.html改为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="<%= BASE_URL %>logo.png">
  <title></title>
  <script>
    let deviceScale= (window.location.search).substring(1).match(new RegExp("(^|&)" + 'pixelRatio' + "=([^&]*)(&|$)"))[2];
    let vp='<meta name="viewport" content="width=device-width,initial-scale=' + 1/deviceScale + ', user-scalable=no">'
    document.write(vp);
  </script>
</head>
<body>
<div id="app"></div>
</body>
</html>

这样出来的效果就是页面在手机上收缩了一些。

因为页面的收缩，所以所有的样式需要放大像素压缩比的值，boxWidth=width*pixelRatio，

比如：我的pixelRatio=3，默认的cutwidth为200，这里就为600。

home.vue

<template>
  <div>
    <ImgCutter @cutDown="cutDown" :boxHeight="height*pixelRatio"
               :boxWidth="width*pixelRatio" :pixelRatio="pixelRatio"
    :cutWidth="600" :cutHeight="600"></ImgCutter>
  </div>
</template>

ImgCutter.vue

props: {}需要定义pixelRatio

            pixelRatio: {
                type: Number,
                default: 0,
                required: false,
            },

将所有的字体大小都需要乘以pixelRatio，需要的宽高，行高也都需要改，还有背景的马赛克的大小.controlBoxInnerLine 的background-size:也需要改动。

注意：上面将@mouse 事件改为@touch，进行手势操作的时候不如鼠标灵活，为了更好的控制截选边框和大小，将css中.controlBtn的宽高改大，更易触，改变截选区域的时候，手指按住圆点就可以操作。如下：

    .controlBtn {
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-sizing: border-box;
        width: 36px;
        height: 36px;
        background: #409eff;
        position: absolute;
        border-radius: 50%;
        z-index: 999;
        pointer-events: auto !important;
    }