Image zoom

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "jsqr": "^1.3.1",
+    "medium-zoom": "^1.0.5",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-color": "^2.18.1",

src/components/app/PartMore.js

@@ -1,18 +1,23 @@
 import React from 'react';
 import './App.css';
-import LinkButton from "../link/LinkButton";
 import GitHubButton from 'react-github-btn'
-import LinkTrace from "../link/LinkTrace";
-import {isPC} from "../../utils/navigatorUtils";
 import ScrollContainer from "react-indiana-drag-scroll";
 import LazyLoad from "react-lazy-load";
+import mediumZoom from "medium-zoom";
+import LinkButton from "../link/LinkButton";
+import ImageZoom from "../../containers/app/ImageZoom";
+import LinkTrace from "../link/LinkTrace";
+import {isPC} from "../../utils/navigatorUtils";
 
 const pictures = [
     'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg?sign=e9619d9e70adc33f9e5da775410220f5&t=1593501268',
     'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=0e29c9617c920148f6e8061386b69de0&t=1593501253',
 ]
 
-const PartMore = () => (
+const PartMore = () => {
+    const zoom = React.useRef(mediumZoom());
+
+    return (
         <div className="Qr-titled-nobg">
             <div className="Qr-Centered title-margin">
                 <div className="Qr-s-title">More</div>
@@ -30,7 +35,7 @@ const PartMore = () => (
                     {
                         pictures.map((url) => (
                                 <LazyLoad offsetVertical={200}>
-                                <img className="Qr-gallery-image" src={url} />
+                                    <ImageZoom zoom={zoom.current} background={"rgba(0, 0, 0, 0)"} className="Qr-gallery-image" src={url}/>
                                 </LazyLoad>
                             )
                         )
@@ -40,41 +45,62 @@ const PartMore = () => (
             <div className="title-margin">
                 <div className="Qr-article">
                     <div className="Qr-Centered">
-                    <p><GitHubButton href="https://github.com/ciaochaos/qrbtf" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
+                        <p><GitHubButton href="https://github.com/ciaochaos/qrbtf"
+                                         data-color-scheme="no-preference: light; light: light; dark: dark;"
+                                         data-icon="octicon-star" data-size="large" data-show-count="true"
+                                         aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
                         <h2>最新消息</h2>
-                    <p><b>2020.6.29</b><br/>新的反馈渠道！我们开始征集好玩的二维码设计啦，可以是推送尾图、海报等等，快来上传吧。<LinkTrace href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer" target="_blank">点击提交</LinkTrace>。</p>
+                        <p><b>2020.6.29</b><br/>新的反馈渠道！我们开始征集好玩的二维码设计啦，可以是推送尾图、海报等等，快来上传吧。<LinkTrace
+                            href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer"
+                            target="_blank">点击提交</LinkTrace>。</p>
                         <p><b>2020.6.24</b><br/>新增深色模式，新增 SP — 3 样式。</p>
                         <p><b>2020.6.22</b><br/>新增 A — a1、A — a2、A — b1、A — b2 样式，添加样式描述，新增桌面端横向拖拽滑动。</p>
-                    <p><b>2020.6.11</b><br/>QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。<LinkTrace href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</LinkTrace>。</p>
+                        <p><b>2020.6.11</b><br/>QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。<LinkTrace
-                    <p><b>2020.5.23</b><br/>网站开源啦！<LinkTrace href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</LinkTrace> 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦！来写个二维码样式吧～</LinkTrace>。</p>
+                            href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer"
+                            target="_blank">访问项目</LinkTrace>。</p>
+                        <p><b>2020.5.23</b><br/>网站开源啦！<LinkTrace href='https://github.com/ciaochaos/qrbtf'
+                                                                 rel="noopener noreferrer"
+                                                                 target="_blank">点击访问</LinkTrace> 我们的
+                            Github。期待你也来参与设计、开发！给个
+                            Star 支持一下不？查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ'
+                                                       rel="noopener noreferrer" target="_blank">QRBTF
+                                开源啦！来写个二维码样式吧～</LinkTrace>。</p>
                         <p><b>2020.5.22</b><br/>新增 C2 样式、下载计数（好像还不太稳定）、普通二维码上传、颜色选择、背景图片上传、输入提示、桌面端横向滚动提示。</p>
                         <h2>为什么要做一个二维码生成器？</h2>
-                    <p>看这里，<LinkTrace href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码</LinkTrace> 这篇文章简要介绍了我们的初心与愿景。</p>
+                        <p>看这里，<LinkTrace href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g'
+                                          rel="noopener noreferrer"
+                                          target="_blank">如何制作一个漂亮的二维码</LinkTrace> 这篇文章简要介绍了我们的初心与愿景。</p>
                         <h2>这个生成器的特别之处在哪里？</h2>
-                    <p>普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 <b>丰富的参数化样式、基于 SVG 的二维码生成能力</b>，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因 SVG 有较好的拓展性，可以完美兼容矢量制图流程。</p>
+                        <p>普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 <b>丰富的参数化样式、基于 SVG 的二维码生成能力</b>，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因
+                            SVG 有较好的拓展性，可以完美兼容矢量制图流程。</p>
                         <h2>如何使用？</h2>
                         <p>从输入 URL 开始（别忘了 http://）。没有确认框，没有额外的页面，选择样式后自动更新，调整参数后下载即可。</p>
                         <h2>我应该下载 SVG 还是 JPG？</h2>
-                    <p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中。SVG 是一个优秀的、标准的矢量图片格式，各大设计软件如 Adobe Illustrator、Sketch 等都对 SVG 有着很好的支持。用户可以在下载 SVG 后导入这些软件进行二次加工，如删除中央的信息点 <b>放入自己的 Logo</b> 等。如果需要直接分享二维码图像，请直接下载 JPG 格式。</p>
+                        <p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中。SVG 是一个优秀的、标准的矢量图片格式，各大设计软件如 Adobe Illustrator、Sketch 等都对 SVG
+                            有着很好的支持。用户可以在下载 SVG 后导入这些软件进行二次加工，如删除中央的信息点 <b>放入自己的 Logo</b> 等。如果需要直接分享二维码图像，请直接下载 JPG 格式。
+                        </p>
                         <h2>使用遇到了问题，怎么反馈？</h2>
                         <p>我们是两位大一的学生，忙于学业，可能在设计与开发的过程中有一些疏漏，敬请谅解。如果遇到浏览器兼容问题，请暂时选择更换软件或设备尝试。</p>
                         <p>请注意，应用并不能保证二维码时刻可被识别，需要多加测试。</p>
-                    <p>编写二维码样式是一个锻炼设计与开发（JavaScript）能力的绝佳机会，如果你有兴趣和我们一起玩这个项目，欢迎添加我的微信（微信号：<span style={{userSelect: "text"}}>nhciao</span>，请备注真实姓名）或发送邮件至 <LinkTrace href='mailto:contact@qrbtf.com'>contact@qrbtf.com</LinkTrace> 联系我们！</p>
+                        <p>编写二维码样式是一个锻炼设计与开发（JavaScript）能力的绝佳机会，如果你有兴趣和我们一起玩这个项目，欢迎添加我的微信（微信号：<span
+                            style={{userSelect: "text"}}>nhciao</span>，请备注真实姓名）或发送邮件至 <LinkTrace
+                            href='mailto:contact@qrbtf.com'>contact@qrbtf.com</LinkTrace> 联系我们！</p>
 
                     </div>
                 </div>
             </div>
             <div className="Qr-Centered btn-row">
                 <div className="div-btn">
-                <LinkButton href={"https://www.yuque.com/qrbtf/docs/donate"} value={"打赏"} />
+                    <LinkButton href={"https://www.yuque.com/qrbtf/docs/donate"} value={"打赏"}/>
-                <LinkButton href={"https://github.com/ciaochaos/qrbtf"} value={"Github"} />
+                    <LinkButton href={"https://github.com/ciaochaos/qrbtf"} value={"Github"}/>
                 </div>
                 <div className="div-btn">
-                <LinkButton href={"https://qrbtf-com.mikecrm.com/J2wjEEq"} value={"反馈"} />
+                    <LinkButton href={"https://qrbtf-com.mikecrm.com/J2wjEEq"} value={"反馈"}/>
-                <LinkButton href={"https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ"} value={"开发"} />
+                    <LinkButton href={"https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ"} value={"开发"}/>
                 </div>
             </div>
         </div>
-)
+    )
+}
 
 export default PartMore;

src/containers/app/ImageZoom.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const ImageZoom = (props) => {
+    const zoomRef = React.useRef(props.zoom.clone(props));
+
+    function attachZoom(image) {
+        zoomRef.current.attach(image);
+    }
+
+    return <img ref={attachZoom} {...props} />
+};
+
+export default ImageZoom;

yarn.lock

@@ -6733,6 +6733,11 @@ media-typer@0.3.0:
   resolved "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+medium-zoom@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.5.tgz#81413dda20ccdd857141ff420cfab788dd32e20e"
+  integrity sha512-aLGa6WlTuFKWvH88bqTrY5ztJMN+D0hd8UX6BYc4YSoPayppzETjZUcdVcksgaoQEMg4cZSmXPg846fTp2rjRQ==
+
 mem@^4.0.0:
   version "4.3.0"
   resolved "https://registry.npm.taobao.org/mem/download/mem-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmem%2Fdownload%2Fmem-4.3.0.tgz#461af497bc4ae09608cdb2e60eefb69bff744178"