zoukankan      html  css  js  c++  java
  • vue 图片放大和缩小的方式

    一、使用vue-directive-image-previewer

    文档:https://www.npmjs.com/package/vue-directive-image-previewer  

    1、安装命令如下:

    npm install vue-directive-image-previewer -D

    2、引入main.js

    import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
    import 'vue-directive-image-previewer/dist/assets/style.css'
    Vue.use(VueDirectiveImagePreviewer)

     3、在页面中使用

    <img v-image-preview src =“url” />

    经过以上操作就可以了,但是目前仅支持放大图片,比较可惜。

    4、卸载vue-directive-image-previewer

    cnpm uninstall vue-directive-image-previewer

    二、使用viewerjs

    文档:https://github.com/faimaklg/vue-viewerjs

    1、安装命令:

    npm install v-viewer --save

    2、全局引入

    import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'
    Vue.use(Viewer)
    Viewer.setDefaults({
      Options: {
        'inline': true, // 启用 inline 模式
        'button': true, // 显示右上角关闭按钮
        'navbar': true, // 显示缩略图导航
        'title': true, // 显示当前图片的标题
        'toolbar': true, // 显示工具栏
        'tooltip': true, // 显示缩放百分比
        'movable': true, // 图片是否可移动
        'zoomable': true, // 图片是否可缩放
        'rotatable': true, // 图片是否可旋转
        'scalable': true, // 图片是否可翻转
        'transition': true, // 使用 CSS3 过度
        'fullscreen': true, // 播放时是否全屏
        'keyboard': true, // 是否支持键盘
        'url': 'data-source' // 设置大图片的 url
      }
    })

    3、页面中使用

     <viewer>
                <img :src="record.PreviewFileUrl"
                     style="80px;height:45px;"
                     alt=""
                     title="点击放大" />
              </viewer>
  • 相关阅读:
    tensor的维度变换
    交叉熵损失函数
    全连接层、softmax的loss
    SoftMax函数
    pytorch实现mnist识别实战
    pytorch索引与切片
    Pytorch中的torch.gather函数
    softmax函数
    Separate to Adapt Open Set Domain Adaptation via Progressive Separation论文总结
    Separate to Adapt: Open Set Domain Adaptation via Progressive Separation论文笔记
  • 原文地址:https://www.cnblogs.com/qtiger/p/13897140.html
Copyright © 2011-2022 走看看