viewerjs 如何新增下载图片功能(npm包补丁)
文章目录
-
- 先实现正常的效果
- 实现下载图片
- 改变viewerjs的build函数
- 源码改变之后，执行npm i 之后node_modules源码又变回了原样
1、viwerjs所有功能都很完善，但唯独缺少了图片的下载
2、需求：在用viwerjs旋转图片后，可以直接下载旋转后的图片
效果：
先实现正常的效果
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>
效果
实现下载图片
在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的封装使用，似乎没有改动源码
在该文件下搜索
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后会自动使用我们写的补丁
