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