- html2canvas 一个强大的使用js开发的浏览器网页截图工具
- dom-to-image 一个可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库
- pica 一个在浏览器中调整图像大小,而不会出现像素失真,处理速度非常快的图片处理
- Lena.js 一个轻量级的可以给你图像加各种滤镜的js库
- Compressor.js 一个使用本地canvas.toBlob API进行图像有损压缩的js库
- Fabric.js 一个易于使用的基于HTML5 canvas元素的图片编辑器
- merge-images 一个将多张图片合并成一张图的js插件
- cropperjs 一款强大的图片裁切库, 支持灵活的图片裁切方式
- Grade 一个基于图像中的前2种主要颜色生成互补渐变背景的库
Multiavatar 头像
生成人物头像的 JS 库。支持随机生成一个好看、独特、多文化的头像
QRCode.js、 qrcode.vue
https://www.npmjs.com/package/qrcodejs2 https://www.npmjs.com/package/qrcode.vue
npm install --save qrcode.vue
npm i qrcodejs2
getBlob(base64) {
const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime类型
const byteString = atob(base64.split(',')[1]); // base64 解码
const arrayBuffer = new ArrayBuffer(byteString.length); // 创建缓冲数组
const intArray = new Uint8Array(arrayBuffer); // 创建视图
for (let i = 0; i < byteString.length; i += 1) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {
type: mimeString,
});
},
savePicture(Url = this.qrcodeUrl) {
const blob = new Blob([''], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = Url;
// eslint-disable-next-line prefer-destructuring
a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, '$2').split('?')[0];
const e = document.createEvent('MouseEvents');
e.initMouseEvent(
'click',
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null,
);
a.dispatchEvent(e);
URL.revokeObjectURL(url);
},
_qrcode(url) {
const div = document.createElement('div');
// eslint-disable-next-line new-cap
const code = new QRCode(div, {
text: url,
width: 500,
height: 500,
colorDark: '###000000',
colorLight: '###ffffff',
correctLevel: QRCode.CorrectLevel.L,
});
// 这里如果需要在页面上展示的话,就将div节点给添加到dom树上去;node.appendChild(div)
const canvas = code._el.querySelector('canvas'); // 获取生成二维码中的canvas,并将canvas转换成base64
const base64Text = canvas.toDataURL('image/png');
const blob = this.getBlob(base64Text); // 将base64转换成blob对象
return window.URL.createObjectURL(blob);
},