uniapp - 图片缩放（平面图显示）

分类：uni-app

canvas uniapp

需求因为要显示楼层平面图片，并且需要缩放，
不同于查看类型的，有时候需要显示标记点。所以其他帖子上看的用不到，就自己写了个。
单纯uniapp + image + canvas（显示标记需要使用canvas）实现；

遇到的坑：之前没主要看文档，没使用movable-area，纯canvas 实现，但是有时候一张图标记点会有几百个，并且canvas 在ios好像是有限制大于1000px 不显示。标记多多时候，会出现卡的问题。

目前实现的代码外部使用movable-area ，需要显示标记点，在用canvas 。

图片缩放实现
因为多处使用，自定义了组件
附上代码

<template>  
    <view class="">  
        <!-- :style="{height:screenH+'upx'}" -->  
        <movable-area  scale-area>  
            <movable-view :style="{width:baseInfo.width+'upx',height:baseInfo.height+'upx'}" direction="all" @scale="onScale"  
             @change="onChange" scale :scale-min="minScale" :scale-max="2" :scale-value="scale" >  

                <image :src="baseInfo.path" :style="{width:baseInfo.width+'upx',height:baseInfo.height+'upx'}"></image>  
            </movable-view>  
        </movable-area>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            baseInfo: {  
                type: Object,  
                default: function(e) {  
                    return {}  
                }  
            }  
        },  
        data() {  
            return {  
                minScale: 0.1,  
                x: 0,  
                y: 0,  
                scale: 0.5,// 定义缩放倍数  
                old: {  
                    x: 0,  
                    y: 0,  
                    scale: 2  
                },  

            }  
        },  
        methods: {  
            onChange: function(e) {  
                // console.log(e)  
                this.old.x = e.detail.x  
                this.old.y = e.detail.y  
            },  
            onScale: function(e) {  
                // console.log(e)  
                this.old.scale = e.detail.scale;  
                this.x = this.old.x  
                this.y = this.old.y  
                this.$nextTick(function() {  
                    this.x = 0  
                    this.y = 0  
                })  
            },  
            // onLoad:function(){  
            //  this.getStyle();  
            // },  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    movable-view {  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        top: 0;  
        left: 0;  
        // top:140upx;  
        // width:750upx;  
        // height:1476upx;  
        // background-color: #007AFF;  
        color: #fff;  
    }  

    movable-area {  
        height: calc(100vh);  
        width: 750upx;  
        background-color: #fff;  
        overflow: hidden;  
    }  
</style>

使用代码

<view v-if='imageInfo !== ""'>  
    <view-img :baseInfo="imageInfo" :style="style"></view-img>  
</view>

js

import viewImg from "./viewImg.vue";   //名字随意  引入使用  

//就不附上全部js ，此处不知道看基础文档，没啥要说的  
components: {  
     viewImg  
},

图片我这是url ，需要获取图片信息；因为防止 url重复不停等调用，我本地缓存了，如果有这个需要，大家也可以这样。本地缓存这，ios/安卓有点不太一样，我后面写到了就顺带提一下吧

    imgInit() {  
                // var context = uni.createCanvasContext('firstCanvas')  
                var that = this;  
                //获取图片链接；  
                var pictureUrl = uni.getStorageSync("pictureUrl");   //  接口返回需要显示的url  
                var picFile = uni.getStorageSync("picFile"); // 存本地地址，不要的存本地 ，直接使用url 不用考虑 安卓和ios。的问题直接使用，  
                //这边就贴上 在线的吧；  

                    uni.getImageInfo({  
                        src: pictureUrl,  
                        success: function(image) {  
                            // uni.showLoading({  
                            //   title: "初次进入，请耐心等待..."  
                            // });  
                            that.imageInfo = image; // 使用   
                            console.log(image)     
                            uni.setStorageSync("picFile", image.path);  
                            var s0 = Math.floor((that.screenW / image.width) * 100) / 100;  
                            // console.log("s0:" + s0);  
                            var s1 = Math.floor((that.screenH / image.height) * 100) / 100;  
                            // console.log("s1:" + s1);  
                            // that.scale = s0 < s1 ? s0 : s1;  
                            that.minScale = s0 < s1 ? s0 : s1;  
                        },  
                        fail: function(image) {  
                            console.log(3);  
                        }  
                    });  
}

在此处说下安卓和ios的问题吧；
如果需要本地存储，ios中需要将图片下载后，在使用；安卓可以直接使用 getImageInfo ，为了保持一直不管安卓还是ios ，我这都下载保存了。
同时，此处因为图片下载了，所以如果图片进行了更换，记得删除下本地的图片；
贴上部分代码，官方文档都有

var imageUrl = "http://xxxxxx.jpg/png"  

uni.downloadFile({ // ios 需要下载后，保存到本地 ,  
                    url: imageUrl,  
                    success: (res) => {  
                        console.log("首次加载，下载成功");  
                        console.log(res);  
                        uni.saveFile({  
                            tempFilePath: res.tempFilePath,  
                            success: function(image) {  
                                console.log("存储后，本地信息")  
                                console.log(image);  
                                that.insertFloor(image.savedFilePath);  
                                that.imgInit2(image.savedFilePath)  
                                that.hideLoading();  
                            }  
                        })  
                    }  
                })  

//删除本地图片代码  

deleteImg(path) {  
                //删除已缓存 图片；  
                console.log("链接已更换，删除愿保存图片")  
                uni.removeSavedFile({  
                    filePath: path,  
                    complete: function(res) {  
                        console.log(res)  
                    }  
                })  
            },

比较简单希望有用
canvas 仅用在需要查看标记点的（后期有空写）

2 赞关注分享