├── 1.png
├── b1.jpeg
├── b2.jpeg
├── qrcode.jpg
├── data.txt
├── data.json
└── qrcode.html


/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Wscats/sweet/HEAD/1.png


--------------------------------------------------------------------------------
/b1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Wscats/sweet/HEAD/b1.jpeg


--------------------------------------------------------------------------------
/b2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Wscats/sweet/HEAD/b2.jpeg


--------------------------------------------------------------------------------
/qrcode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Wscats/sweet/HEAD/qrcode.jpg


--------------------------------------------------------------------------------
/data.txt:
--------------------------------------------------------------------------------
 1 | {
 2 |     "data": [
 3 |         {
 4 |             "tag": "全国",
 5 |             "desc": "王者荣耀新手群",
 6 |             "title": "王者荣耀",
 7 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
 8 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
 9 |         },
10 |         {
11 |             "tag": "全国",
12 |             "desc": "王者荣耀王者群",
13 |             "title": "王者荣耀",
14 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
15 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
16 |         },
17 |         {
18 |             "tag": "华南",
19 |             "desc": "王者荣耀华南群",
20 |             "title": "王者荣耀",
21 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
22 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
23 |         },
24 |         {
25 |             "tag": "华中",
26 |             "desc": "王者荣耀华中群",
27 |             "title": "王者荣耀",
28 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
29 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
30 |         },
31 |         {
32 |             "tag": "华北",
33 |             "desc": "王者荣耀华北群",
34 |             "title": "王者荣耀",
35 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
36 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
37 |         },
38 |         {
39 |             "tag": "全国",
40 |             "desc": "和平精英福利群",
41 |             "title": "和平精英",
42 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
43 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
44 |         }
45 |     ],
46 |     "background": [
47 |         {
48 |             "imageURL": "http://139.155.47.41:3000/images/b1.jpeg"
49 |         },
50 |         {
51 |             "imageURL": "http://139.155.47.41:3000/images/b2.jpeg"
52 |         }
53 |     ]
54 | }


--------------------------------------------------------------------------------
/data.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "data": [
 3 |         {
 4 |             "tag": "全国",
 5 |             "desc": "王者荣耀新手群",
 6 |             "title": "王者荣耀",
 7 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
 8 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
 9 |         },
10 |         {
11 |             "tag": "全国",
12 |             "desc": "王者荣耀王者群",
13 |             "title": "王者荣耀",
14 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
15 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
16 |         },
17 |         {
18 |             "tag": "华南",
19 |             "desc": "王者荣耀华南群",
20 |             "title": "王者荣耀",
21 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
22 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
23 |         },
24 |         {
25 |             "tag": "华中",
26 |             "desc": "王者荣耀华中群",
27 |             "title": "王者荣耀",
28 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
29 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
30 |         },
31 |         {
32 |             "tag": "华北",
33 |             "desc": "王者荣耀华北群",
34 |             "title": "王者荣耀",
35 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
36 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
37 |         },
38 |         {
39 |             "tag": "全国",
40 |             "desc": "和平精英福利群",
41 |             "title": "和平精英",
42 |             "imageURL": "http://139.155.47.41:3000/images/1.png",
43 |             "qrcode": "http://139.155.47.41:3000/images/1.png"
44 |         }
45 |     ],
46 |     "background": [
47 |         {
48 |             "imageURL": "http://139.155.47.41:3000/images/b1.jpeg"
49 |         },
50 |         {
51 |             "imageURL": "http://139.155.47.41:3000/images/b2.jpeg"
52 |         }
53 |     ]
54 | }


--------------------------------------------------------------------------------
/qrcode.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Document</title>
  9 | </head>
 10 | 
 11 | <body>
 12 |     <input type="file" class="file" name="file" />
 13 |     <img src="" alt="" class="origin" style="display: none;" />
 14 |     <script>
 15 |         /*
 16 |          * 点击文件上传
 17 |          */
 18 |         document.querySelector('.file').addEventListener('change', function (e) {
 19 |             let files = e.target.files
 20 |             // 判断是否有文件
 21 |             if (!files.length) return
 22 |             previewFile(files[0])
 23 |         })
 24 | 
 25 |         /*
 26 |          * 将file对象转化为base64编码
 27 |          * file  目标file对象
 28 |          */
 29 |         function previewFile(file) {
 30 |             let reader
 31 |             if (file) {
 32 |                 // 创建流对象
 33 |                 reader = new FileReader()
 34 |                 reader.readAsDataURL(file)
 35 |             }
 36 |             // 捕获 转换完毕
 37 |             reader.onload = async function (e) {
 38 |                 const imgUrl = e.target.result
 39 |                 // 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
 40 |                 document.querySelector('.origin').src = e.target.result
 41 |                 // await new Promise((resolve) => (setTimeout(() => resolve(), 1000)));
 42 |                 for (let offset = 0; offset < 14; offset++) {
 43 |                     await run(imgUrl, offset);
 44 |                 }
 45 |             }
 46 |         }
 47 | 
 48 |         /**
 49 |          * 图片路径转成canvas
 50 |          * @param {图片url} url
 51 |          */
 52 |         async function imgToCanvas(url) {
 53 |             // 创建img元素
 54 |             const img = document.createElement("img");
 55 |             img.src = url;
 56 |             img.setAttribute("crossOrigin", "anonymous"); // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
 57 |             await new Promise((resolve) => (img.onload = resolve));
 58 |             // 创建canvas DOM元素，并设置其宽高和图片一样
 59 |             const canvas = document.createElement("canvas");
 60 |             // console.log('canvas.width', img.width + Number((Math.random() * 5).toFixed(2)));
 61 |             // console.log('canvas.height', img.width + Number((Math.random() * 5).toFixed(2)));
 62 |             canvas.width = img.width + Number((Math.random() * 5).toFixed(2));
 63 |             canvas.height = img.height + Number((Math.random() * 5).toFixed(2));
 64 |             // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
 65 |             canvas.getContext("2d").drawImage(img, 0, 0);
 66 |             return canvas;
 67 |         }
 68 | 
 69 |         /**
 70 |          * canvas添加水印
 71 |          * @param {canvas对象} canvas
 72 |          * @param {水印文字} text
 73 |          */
 74 |         function addWatermark(canvas, text) {
 75 |             const ctx = canvas.getContext("2d");
 76 |             ctx.fillStyle = "white";
 77 |             ctx.textBaseline = "middle";
 78 |             const x = parseInt(Math.random() * 400);
 79 |             const y = parseInt(Math.random() * 400);
 80 |             ctx.fillText(text, x, y);
 81 |             return canvas;
 82 |         }
 83 | 
 84 |         /**
 85 |          * canvas转成img
 86 |          * @param {canvas对象} canvas
 87 |          */
 88 |         function convasToImg(canvas, offset) {
 89 |             // 新建Image对象，可以理解为DOM
 90 |             const image = new Image();
 91 |             const a = document.createElement('a');
 92 |             // canvas.toDataURL 返回的是一串Base64编码的URL
 93 |             // 指定格式 PNG
 94 |             image.src = canvas.toDataURL("image/png");
 95 |             image.id = `img-${randomString(6)}`;
 96 |             a.href = canvas.toDataURL("image/png")
 97 |             a.download = `img-${randomString(6)}`;
 98 |             a.appendChild(image);
 99 |             return a;
100 |         }
101 | 
102 |         // 运行示例
103 |         async function run(imgUrl, offset) {
104 |             // const imgUrl = "https://cdn.jsdelivr.net/gh/zhangpanfei/static@demo/img/test.jpg";
105 |             // 1.图片路径转成canvas
106 |             const tempCanvas = await imgToCanvas(imgUrl);
107 |             // 2.canvas添加水印
108 |             const canvas = addWatermark(tempCanvas, randomString(parseInt(Math.random() * 200)));
109 |             // 3.canvas转成img
110 |             const a = convasToImg(canvas, offset);
111 |             a.dispatchEvent(new MouseEvent('click'));
112 |             // 查看效果
113 |             document.body.appendChild(a);
114 |         }
115 | 
116 |         // 下载图片
117 |         function download(link, filename) {
118 |             let a = document.createElement('a');
119 |             a.href = link;
120 |             a.download = filename || 'default.png';
121 |             a.dispatchEvent(new MouseEvent('click'));
122 |         }
123 | 
124 |         // 随机数
125 |         function randomString(length) {
126 |             const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
127 |             let result = '';
128 |             for (let i = length; i > 0; --i) {
129 |                 result += str[Math.floor(Math.random() * str.length)];
130 |             };
131 |             return result;
132 |         }
133 |     </script>
134 | </body>
135 | 
136 | </html>


--------------------------------------------------------------------------------