detail add download button

config/translate.js

@@ -135,6 +135,22 @@ let play = {
   ja: '遊ぶ',
 }
 
+let download = {
+  zh: '下载',
+  en: 'Download',
+  es: 'Descargar',
+  pt: 'Download',
+  ja: 'ダウンロード',
+}
+
+let print = {
+  zh: '打印',
+  en: 'Print',
+  es: 'Imprimir',
+  pt: 'Imprimir',
+  ja: '印刷',
+}
+
 let tag = {
   zh: '标签',
   en: 'Tag',
@@ -436,6 +452,8 @@ let translate = {
   my,
   myWorks,
   play,
+  download,
+  print,
   tag,
   cuteCat,
   cuteCatDescription,

dist/stylesheets/detail.css

@@ -39,9 +39,17 @@
   flex: 1 1 65%;
   max-width: 65%;
 }
+
+.button-wrapper {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
 .play-button {
   display: inline-block;
   margin-top: 20px;
+  margin-right: 20px;
   padding: 10px 20px;
   background-color: #ff4081;
   color: white;
@@ -49,6 +57,8 @@
   text-decoration: none;
   border-radius: 4px;
   font-weight: bold;
+  border: none;
+  cursor: pointer;
 }
 
 /* 媒体查询：当屏幕宽度小于768px时（移动端） */

routes/index.js

@@ -712,6 +712,33 @@ router.get('/play/:id', function (req, res, next) {
 
 });
 
+// print页路由
+router.get('/print/:id', function (req, res, next) {
+  (async function () {
+    let id = req.params.id;
+    let data = {
+      id,
+      title: meta.playTitle.en,
+      description: meta.playDescription.en,
+    };
+
+    utils.validators.validateId(id);
+    let doc = await models.Art.findById(id);
+    if (!doc) throw createError(404, 'Art Not Found!');
+
+    let host = config.resHost;
+    let size = Math.min(doc.width, 2000);
+    let downlink = `${host}/thumbs/coloring-page/page/${size}/${doc._id}.jpeg`;
+
+    data.downlink = downlink;
+
+    res.render('print', data);
+
+  })().catch(next);
+
+});
+
+
 
 router.get('/:lang/info', function (req, res, next) {
   (async function () {
@@ -737,9 +764,9 @@ const organizeData = (data, lang) => {
     let publishVersion = doc.publishVersion || 0;
     let version = publishVersion + 1500;
 
-    doc.thumb = `${host}/thumbs/v2/page/480/${doc._id}.jpeg`;
+    doc.thumb = `${host}/thumbs/coloring-page/page/480/${doc._id}.jpeg`;
     if (doc.mystery) { // 神秘图固定用一张
-      doc.thumb = `${host}/thumbs/v2/mystery/480/${doc._id}.jpeg`;
+      doc.thumb = `${host}/thumbs/coloring-page/mystery/480/${doc._id}.jpeg`;
     } else if (doc.hasSpecial) { // special图有切线图、渐变切线图、灰度图、上传图3中可选
       let str = 'special_outline';
       if (doc.useSpecialThumb == 1) {
@@ -749,7 +776,7 @@ const organizeData = (data, lang) => {
       } else if (doc.useSpecialThumb == 3) {
         str = 'special_gradient';
       }
-      doc.thumb = `${host}/thumbs/v2/${str}/480/${doc._id}.jpeg`;
+      doc.thumb = `${host}/thumbs/coloring-page/${str}/480/${doc._id}.jpeg`;
     }
 
     doc.zip = `${host}/zips/v2/number_mini/${version}/${doc._id}.zip`;
@@ -782,9 +809,9 @@ const organizeDetail = (doc, lang) => {
   let publishVersion = doc.publishVersion || 0;
   let version = publishVersion + 1500;
 
-  doc.thumb = `${host}/thumbs/v2/page/480/${doc._id}.jpeg`;
+  doc.thumb = `${host}/thumbs/coloring-page/page/480/${doc._id}.jpeg`;
   if (doc.mystery) { // 神秘图固定用一张
-    doc.thumb = `${host}/thumbs/v2/mystery/480/${doc._id}.jpeg`;
+    doc.thumb = `${host}/thumbs/coloring-page/mystery/480/${doc._id}.jpeg`;
   } else if (doc.hasSpecial) { // special图有切线图、渐变切线图、灰度图、上传图3中可选
     let str = 'special_outline';
     if (doc.useSpecialThumb == 1) {
@@ -794,7 +821,7 @@ const organizeDetail = (doc, lang) => {
     } else if (doc.useSpecialThumb == 3) {
       str = 'special_gradient';
     }
-    doc.thumb = `${host}/thumbs/v2/${str}/480/${doc._id}.jpeg`;
+    doc.thumb = `${host}/thumbs/coloring-page/${str}/480/${doc._id}.jpeg`;
   }
 
   doc.zip = `${host}/zips/v2/number_mini/${version}/${doc._id}.zip`
@@ -824,6 +851,9 @@ const organizeDetail = (doc, lang) => {
   let utf8name = encodeURIComponent(doc.title.replace(/[\s_]+/g, '-')).toLowerCase();
   doc.uri = `/${lang}/coloring-page/${utf8name}-${doc._id}`;
 
+  let size = Math.min(doc.width, 2000);
+  doc.downlink = `${host}/thumbs/coloring-page/page/${size}/${doc._id}.jpeg`;
+
   delete doc.hasSpecial;
   delete doc.useSpecialThumb;
   delete doc.publishVersion;

views/detail.ejs

@@ -42,13 +42,18 @@
                 <div>
                     <%= detail.desc %>
                 </div>
-                <a href="/play/<%= detail._id %>" class="play-button">
-                    <%= translate.play[lang] %>
-                </a>
+                <div class="button-wrapper">
+                    <a href="/play/<%= detail._id %>" class="play-button">
+                        <%= translate.play[lang] %>
+                    </a>
+                    <a id="downloadBtn" class="play-button" style="background-color: lightseagreen;">
+                        <%= translate.download[lang] %>
+                    </a>
+                </div>
             </div>
         </div>
 
-        <p style="display: flex; justify-content: center; color: #777; font-size: 18px; font-weight: 500;">
+        <p style=" display: flex; justify-content: center; color: #777; font-size: 18px; font-weight: 500;">
             <%= translate.mayYouLike[lang] %>:
         </p>
 
@@ -63,6 +68,18 @@
 
         <%- include('pagination') %>
 
+
+            <script>
+                document.getElementById('downloadBtn').addEventListener('click', function () {
+                    var link = document.createElement('a');
+                    link.style.display = 'none';
+                    link.href = '<%= detail.downlink %>';
+                    link.download = '<%= detail._id %>.jpeg';
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                });
+            </script>
 </body>
 
 </html>

views/print.ejs

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<head>
+    <%- include('common-meta') %>
+</head>
+
+<body>
+    <img src="<%= downlink%>" alt="print">
+
+    <script>
+        window.onload = function () {
+            window.print();
+        };
+    </script>
+</body>
+
+</html>