Painter

https://github.com/Kujiale-Mobile/Painter
小程序生成图片分享

  • 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 库。支持随机生成一个好看、独特、多文化的头像

image.png

QRCode.js、 qrcode.vue

https://www.npmjs.com/package/qrcodejs2 https://www.npmjs.com/package/qrcode.vue

  1. npm install --save qrcode.vue
  2. npm i qrcodejs2
  5.    getBlob(base64) {
  6.       const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime类型
  7.       const byteString = atob(base64.split(',')[1]); // base64 解码
  8.       const arrayBuffer = new ArrayBuffer(byteString.length); // 创建缓冲数组
  9.       const intArray = new Uint8Array(arrayBuffer); // 创建视图
  10.       for (let i = 0; i < byteString.length; i += 1) {
  11.         intArray[i] = byteString.charCodeAt(i);
  12.       }
  13.       return new Blob([intArray], {
  14.         type: mimeString,
  15.       });
  16.     },
  17.     savePicture(Url = this.qrcodeUrl) {
  18.       const blob = new Blob([''], { type: 'application/octet-stream' });
  19.       const url = URL.createObjectURL(blob);
  20.       const a = document.createElement('a');
  21.       a.href = Url;
  22.       // eslint-disable-next-line prefer-destructuring
  23.       a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, '$2').split('?')[0];
  24.       const e = document.createEvent('MouseEvents');
  25.       e.initMouseEvent(
  26.         'click',
  27.         true,
  28.         false,
  29.         window,
  30.         0,
  31.         0,
  32.         0,
  33.         0,
  34.         0,
  35.         false,
  36.         false,
  37.         false,
  38.         false,
  39.         0,
  40.         null,
  41.       );
  42.       a.dispatchEvent(e);
  43.       URL.revokeObjectURL(url);
  44.     },
  45.     _qrcode(url) {
  46.       const div = document.createElement('div');
  47.       // eslint-disable-next-line new-cap
  48.       const code = new QRCode(div, {
  49.         text: url,
  50.         width: 500,
  51.         height: 500,
  52.         colorDark: '###000000',
  53.         colorLight: '###ffffff',
  54.         correctLevel: QRCode.CorrectLevel.L,
  55.       });
  56.       // 这里如果需要在页面上展示的话，就将div节点给添加到dom树上去；node.appendChild(div)
  57.       const canvas = code._el.querySelector('canvas'); // 获取生成二维码中的canvas，并将canvas转换成base64
  58.       const base64Text = canvas.toDataURL('image/png');
  59.       const blob = this.getBlob(base64Text); // 将base64转换成blob对象
  60.       return window.URL.createObjectURL(blob);
  61.     },

图片颜色提取