1. Toy模板网首页
  2. > Toy博客

viewerjs 如何新增下载图片功能(npm包补丁)

8月前 作者：外围前端吴彦祖 分类：Toy博客 阅读(26) 违法举报

这篇具有很好参考价值的文章主要介绍了viewerjs 如何新增下载图片功能(npm包补丁)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、viwerjs所有功能都很完善，但唯独缺少了图片的下载
2、需求：在用viwerjs旋转图片后，可以直接下载旋转后的图片
效果：
viewerjs 如何新增下载图片功能(npm包补丁),js,Vue,前端,node.js,javascript

先实现正常的效果

1、安装v-viewer(一个对viwerjs的使用方式优化的npm包)

npm i v-viewer

2、

main.js文件 (vue2版本)

import Vue from 'vue'
import App from './App.vue'
//哪怕使用v-viewer也需要导入正常的viwerjs的css文件
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

Vue.use(Viewer, {
  defaultOptions: {
  //里面可以填一些配置项，这里我先不填
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

app.vue文件中使用组件

<template>
	<div class="main">
		<viewer ref="viewer">
			<img
				src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
				alt=""
				data-uid="uid字段"
				ref="img"
			/>
		</viewer>
	</div>
</template>
<script>
	export default {
		data() {
			return {};
		},
		props: {},
		watch: {},
		mounted() {
			
		},
		created() {},
		methods: {},
	};
</script>
<style scoped>
</style>

效果
viewerjs 如何新增下载图片功能(npm包补丁),js,Vue,前端,node.js,javascript

实现下载图片

在main.js中添加配置项
可以先看下面build函数的改动，再看main中的download

import Vue from 'vue'
import App from './App.vue'
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.config.productionTip = false
//可以先忽略base64toBlob函数，就是个base64文件转blob的函数
function base64toBlob(dataurl) {
  var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
    type: mime
  });
}
Vue.use(Viewer, {
  defaultOptions: {
  //下载事件的回调
    download(viewer) {
      //当前显示图片的索引
      const index = viewer.index
      //所有图片构成的数组
      const list = viewer.images
      //当前显示的图片
      const ima = list[index]
      const canvas = document.createElement('canvas') //获取canvas
      //对应的CanvasRenderingContext2D对象(画笔)
      let img = new Image() //创建新的图片对象
      let base64 = ''; //base64 
      img.src = ima.src + '?' + new Date().getTime();
      //如果您仅仅是下载当前图片， img.src便是当前的图片地址   
      //下面的内容就完全可以不用看了
      //自行百度:前端拿到图片地址，如何下载图片
  
      const rotate = viewer.imageData.rotate
      let x, y
      const type = rotate / 90 % 4
      img.setAttribute("crossOrigin", 'Anonymous')
      img.onload = function () { //图片加载完，再draw 和 toDataURL
        let width = img.width
        let height = img.height
        const flg = width == height
        //这里写的不是很好(4个if判断)，有更好的书写方式可以告知我一下，除了(switch、改成object的形式)
        //0、1、2、3对应旋转0°、90°、180°、270°
        //0的时候不需要特处理
        if (type == 0) {
          x = 0;
          y = 0
        } else if (type == 1) {
        //1的时候需要考虑一种清空，如果他是个矩形图片，也就是宽高不相等
        //在旋转90°后，我们需要调整canvas的宽高、同理270°一样
          x = height;
          y = 0;
          if (!flg) {
            const blg = width
            width = height
            height = blg
          }
        } else if (type == 2) {
          x = width;
          y = height;
        } else if (type == 3) {
          x = 0;
          y = height;
          if (!flg) {
            const blg = width
            width = height
            height = blg
          }
        }
        canvas.width = width
        canvas.height = height
        let ctx = canvas.getContext("2d")
        ctx.translate(x, y);
        ctx.rotate(rotate * Math.PI / 180);
        ctx.drawImage(img, 0, 0, img.width, img.height);
        //图片转base64
        base64 = canvas.toDataURL("image/png");
        //base64转链接，该链接便是用户旋转后的图片了
        //如果想下载该图片，直接定义a标签，然后触发点击事件下载即可,可自行百度拿到链接，如何下载链接的内容
        console.log('url___', URL.createObjectURL(base64toBlob(base64)));
      }
    }
  }
})

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

找到viwerjs源文件
/node_modules/viewerjs/dist/viewer.js
为什么不去v-viewer文件下找呢？上面说了，v-viewer是对viwwerjs的封装使用，似乎没有改动源码
viewerjs 如何新增下载图片功能(npm包补丁),js,Vue,前端,node.js,javascript
在该文件下搜索

toolbar.appendChild(list)

该代码存在于build函数下面，作用是构建底部的工具按钮

改变viewerjs的build函数

build函数源代码(看我写的注释)
其中注释最多的地方便是对源码的改动

{
      key: "build",
      value: function build() {
        if (this.ready) {
          return;
        }
        //关键变量之一，当前viewerjs挂载的dom
        var element = this.element,
        //关键变量，当前的viewer的option配置项
          options = this.options;
        var parent = element.parentNode;
        var template = document.createElement('div');
        template.innerHTML = TEMPLATE;
        var viewer = template.querySelector(".".concat(NAMESPACE, "-container"));
        var title = viewer.querySelector(".".concat(NAMESPACE, "-title"));
        //toolbar 关键变量之一，下面代码是获取toolbar的dom元素
        var toolbar = viewer.querySelector(".".concat(NAMESPACE, "-toolbar"));
        var navbar = viewer.querySelector(".".concat(NAMESPACE, "-navbar"));
        var button = viewer.querySelector(".".concat(NAMESPACE, "-button"));
        var canvas = viewer.querySelector(".".concat(NAMESPACE, "-canvas"));
        this.parent = parent;
        this.viewer = viewer;
        this.title = title;
        this.toolbar = toolbar;
        this.navbar = navbar;
        this.button = button;
        this.canvas = canvas;
        this.footer = viewer.querySelector(".".concat(NAMESPACE, "-footer"));
        this.tooltipBox = viewer.querySelector(".".concat(NAMESPACE, "-tooltip"));
        this.player = viewer.querySelector(".".concat(NAMESPACE, "-player"));
        this.list = viewer.querySelector(".".concat(NAMESPACE, "-list"));
        viewer.id = "".concat(NAMESPACE).concat(this.id);
        title.id = "".concat(NAMESPACE, "Title").concat(this.id);
        addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(Array.isArray(options.title) ? options.title[0] : options.title));
        addClass(navbar, !options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));
        toggleClass(button, CLASS_HIDE, !options.button);
        if (options.keyboard) {
          button.setAttribute('tabindex', 0);
        }
        if (options.backdrop) {
          addClass(viewer, "".concat(NAMESPACE, "-backdrop"));
          if (!options.inline && options.backdrop !== 'static') {
            setData(canvas, DATA_ACTION, 'hide');
          }
        }
        if (isString(options.className) && options.className) {
          // In case there are multiple class names
          options.className.split(REGEXP_SPACES).forEach(function (className) {
            addClass(viewer, className);
          });
        }
        if (options.toolbar) {
          var list = document.createElement('ul');
          var custom = isPlainObject(options.toolbar);
          var zoomButtons = BUTTONS.slice(0, 3);
          var rotateButtons = BUTTONS.slice(7, 9);
          var scaleButtons = BUTTONS.slice(9);
          if (!custom) {
            addClass(toolbar, getResponsiveClass(options.toolbar));
          }
          //关键函数之一，forEach，是对传统foreach的1封装
          //BUTTONS关键变量之一，是一个数组，里面存放的是底部操作工具栏信息
          //下面的foreach的解读：根据BUTTONS这个数组构建出底部工具栏按钮，并且给对应的按钮添加一些属性信息
          forEach(custom ? options.toolbar : BUTTONS, function (value, index) {
            var deep = custom && isPlainObject(value);
            var name = custom ? hyphenate(index) : value;
            var show = deep && !isUndefined(value.show) ? value.show : value;
            if (!show || !options.zoomable && zoomButtons.indexOf(name) !== -1 || !options.rotatable && rotateButtons.indexOf(name) !== -1 || !options.scalable && scaleButtons.indexOf(name) !== -1) {
              return;
            }
            var size = deep && !isUndefined(value.size) ? value.size : value;
            var click = deep && !isUndefined(value.click) ? value.click : value;
            var item = document.createElement('li');
            if (options.keyboard) {
              item.setAttribute('tabindex', 0);
            }
            item.setAttribute('role', 'button');
            addClass(item, "".concat(NAMESPACE, "-").concat(name));
            if (!isFunction(click)) {
              setData(item, DATA_ACTION, name);
            }
            if (isNumber(show)) {
              addClass(item, getResponsiveClass(show));
            }
            if (['small', 'large'].indexOf(size) !== -1) {
              addClass(item, "".concat(NAMESPACE, "-").concat(size));
            } else if (name === 'play') {
              addClass(item, "".concat(NAMESPACE, "-large"));
            }
            if (isFunction(click)) {
              addListener(item, EVENT_CLICK, click);
            }
            list.appendChild(item);
          });
          toolbar.appendChild(list);
        } else {
          addClass(toolbar, CLASS_HIDE);
        }
        //代码走到这一步，表示toolbar基本按钮已经配置完成了
        //在这里来添加我们自己想加的按钮
        //下面代码是我添加的功能
        //开始
        //isFunction：判断传递的download是不是对象，isFunction是viwerjs作者封装好的方法
        //addListener：给某个dom元素添加事件监听，同样是viwerjs作者封装好的
        //addListener(参数一是dom元素，参数二是事件名称，参数三是事件回调)
        //addListener会有参数4，参数4是元素监听器的一些配置项，非必填
        if(isFunction(options.download)){
        //创建保存按钮
          var download = document.createElement("li")
          var that = this
          //给按钮加事件
          addListener(download,EVENT_CLICK,function(){
          // options.download就是我上面main.js传递的download函数
          //在点击该按钮后，同时执行download回调
          //传递参数，that.element是viwerjs挂载的dom，
          //that.element.viewer，viwerjs挂载后会为挂载的元素添加viewer属性(巨全的属性，里面啥都有)，可以说我们拿到viewer基本所有的内容都可以拿到了
            options.download(that.element.viewer)
          })
          //addclass是别人封装好的，给元素加类名，加完类名后直接改变css样式就行了，或者直接用行内style
          addClass(download,'viewerjs-download')
          list.appendChild(download)
        }
        ///结束
        if (!options.rotatable) {
          var rotates = toolbar.querySelectorAll('li[class*="rotate"]');
          addClass(rotates, CLASS_INVISIBLE);
          forEach(rotates, function (rotate) {
            toolbar.appendChild(rotate);
          });
        }
        if (options.inline) {
          addClass(button, CLASS_FULLSCREEN);
          setStyle(viewer, {
            zIndex: options.zIndexInline
          });
          if (window.getComputedStyle(parent).position === 'static') {
            setStyle(parent, {
              position: 'relative'
            });
          }
          parent.insertBefore(viewer, element.nextSibling);
        } else {
          addClass(button, CLASS_CLOSE);
          addClass(viewer, CLASS_FIXED);
          addClass(viewer, CLASS_FADE);
          addClass(viewer, CLASS_HIDE);
          setStyle(viewer, {
            zIndex: options.zIndex
          });
          var container = options.container;
          if (isString(container)) {
            container = element.ownerDocument.querySelector(container);
          }
          if (!container) {
            container = this.body;
          }
          container.appendChild(viewer);
        }
        if (options.inline) {
          this.render();
          this.bind();
          this.isShown = true;
        }
        this.ready = true;
        if (isFunction(options.ready)) {
          addListener(element, EVENT_READY, options.ready, {
            once: true
          });
        }
        if (dispatchEvent(element, EVENT_READY) === false) {
          this.ready = false;
          return;
        }
        if (this.ready && options.inline) {
          this.view(this.index);
        }
      }

      /**
       * Get the no conflict viewer class.
       * @returns {Viewer} The viewer class.
       */
    }

源码改变之后，执行npm i 之后node_modules源码又变回了原样

利用patch-package解决该问题

安装

npm i patch-package

安装完成后，执行命令

 npx patch-package viewerjs
 //viewerjs是我们修改node_modules中的源码文件名 npx patch-package为固定内容

执行命令后发现，项目多了一个patches文件，这个便是对源码的补丁，我们需要把这个文件上传至项目仓库中，然后你同事拉下代码，执行npm i后会自动使用我们写的补丁
viewerjs 如何新增下载图片功能(npm包补丁),js,Vue,前端,node.js,javascript文章来源地址https://www.toymoban.com/news/detail-633748.html

到了这里，关于viewerjs 如何新增下载图片功能(npm包补丁)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 新增Node.js运行环境、新增系统缓存清理功能，1Panel开源面板v1.7.0发布

    新增Node.js运行环境、新增系统缓存清理功能，1Panel开源面板v1.7.0发布

    2023年10月16日，现代化、开源的Linux服务器运维管理面板1Panel正式发布v1.7.0版本。 在这个版本中，1Panel新增Node.js运行环境；新增系统缓存清理功能；应用安装时支持选择远程数据库。此外，我们进行了40多项功能更新和问题修复。1Panel应用商店新增了2款应用，并且更新了25款

    2024年02月06日
    浏览(45)

  • JS批量下载图片

    例如，你在网上，看到某个网页可以下载很多图片资源，但是没有批量下载怎么办？于是，幻想有这么个函数 downloadImages(imageURLs) 批量下载。咋整？ 解决下载问题 一般情况下，用 a 标签可以实现文件的下载功能。一般下载是这样的代码： 如此，点击下载，即可显示下载，此

    2024年02月08日
    浏览(32)
  • 功能消费迈向精智生活，绿联如何撬动3C数码新增量？

    功能消费迈向精智生活，绿联如何撬动3C数码新增量？

    根据行业生命周期理论，当前国产移动数码周边市场俨然已迈入成熟期，相关企业也完成一轮腾飞，正在为新的发展蓄能。 其中，绿联的发展历程可以说是行业进化升级的缩影。产品层面，已完成从“数据线厂商”到专业数码科技公司的蜕变。2023年京东双十一战报显示，绿

    2024年01月20日
    浏览(66)
  • node.js 爬虫图片下载

    node.js 爬虫图片下载

    运行主程序前需要先安装使用到的模块： npm install superagent --save axios要安装指定版,安装最新版会报错：npm install axios@0.19.2 --save 后端爬到数据后，把结果写入index.html再返回给前端显示。 前端请求效果图 后端运行效果图 下载到文件夹的图片

    2024年02月15日
    浏览(31)
  • 原生JS实现图片裁剪功能

    原生JS实现图片裁剪功能

    功能介绍：图片通过原生input上传，使用canvas进行图片裁剪。 裁剪框限制不允许超出图片范围，图片限制了最大宽高（自行修改要的尺寸），点击确认获取新的base64图片数据 注：fixed布局不适用该方案，若是fixed布局请查看另一篇文章 效果图： 上代码

    2024年02月11日
    浏览(40)

  • js下载图片、pdf等文件，无预览

    直接使用window.open()或window.locat.href()下载文件遇到图片或pdf文件就会跳转预览页，不能满足我想要的点击直接下载文件到本地的需求，尝试多次，最终通过以下方法实现了我的需求。 鉴于后端返回的是文件路径，首先要将文件url地址转为文件对象，代码如下： npm install saveA

    2024年02月13日
    浏览(39)

  • 解决：js 根据图片链接（image url）下载，有的打开预览，有的下载

    1、问题描述 https://*****/drugTestReport/20230515/202305151106111386737.png https://*****/drugTestReport/20230605/202306051540314553141.jpg 同样结构的两个图片链接，使用window.open(url)，一个是打开预览，另一个是下载   2、解决方法，通过fetch请求url，获取blob类型，区分情况，统一成下载。  

    2024年02月09日
    浏览(45)

  • 如何解决无法npm下载electron依赖的

    使用electron，安照官方例子，结果是失败的。原因是下载官网的二进制包失败，结果不能执行。 也用了npm的镜像：registry = \\\"https://registry.npmmirror.com/\\\"，也不行。 后来网上折腾一段时间，看到一个开源项目（基于electron)，写到要在npm设置electron的镜像，才可以。 使用命令：npm

    2024年02月21日
    浏览(31)

  • 微信小程序实现图片下载与保存功能

    首先，定义了一个全局的定时器变量 timer 。 在 downloadImage 函数中，如果 timer 已经存在，就清除它，以确保每次只有一个下载任务在进行。 然后，设置一个新的定时器，延迟1秒后开始执行下载任务。这是为了防止频繁触发下载操作。 在定时器的回调函数中，首先显示一个加

    2024年02月03日
    浏览(60)
  • 使用uniapp实现小程序图片和视频的下载功能

    使用uniapp实现小程序图片和视频的下载功能

    提示：本人亲测可直接使用 url: http 图片/视频 is_video：false图片下载 true视频下载 提示：这是使用的小程序，可以去体验

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包