[png download]

src/components/app/PartDownload.js

@@ -15,7 +15,20 @@ const WxMessage = () => {
     return null
 }
 
-const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) => {
+const ImgBox = ({ imgData }) => {
+    if (imgData.length > 0) {
+        return (
+            <div id="dl-image">
+                <div id="dl-image-inner">
+                    <img id="dl-image-inner-jpg" src={imgData} alt="长按保存二维码" />
+                </div>
+            </div>
+        )
+    }
+    return null
+}
+
+const PartDownload = ({ value, downloadCount, onSvgDownload, onImgDownload }) => {
     const [imgData, setImgData] = useState('');
 
     return (
@@ -30,22 +43,16 @@ const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) =>
         <div className="Qr-Centered">
             <div className="btn-row">
                 <div className="div-btn">
-                    <button className="dl-btn" onClick={() => {
-                        onJpgDownload().then(res => setImgData(res));
-                    }}>
-                        JPG
-                    </button>
+                    <button className="dl-btn" onClick={() => {onImgDownload("jpg").then(res => setImgData(res));}}>JPG</button>
+                    <button className="dl-btn" onClick={() => {onImgDownload("png").then(res => setImgData(res));}}>PNG</button>
                     <button className="dl-btn" onClick={onSvgDownload}>SVG</button>
                 </div>
             </div>
-
             <div id="wx-message">
                 <WxMessage/>
             </div>
             <div>
-                {
-                    imgData.length > 0 ? <div id="dl-image"><div id="dl-image-inner"><img id="dl-image-inner-jpg" src={imgData} alt="长按保存二维码" /></div></div> : null
-                }
+                <ImgBox imgData={imgData} />
             </div>
         </div>
     </div>
@@ -54,8 +61,9 @@ const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) =>
 
 PartDownload.propTypes = {
     value: PropTypes.string.isRequired,
+    downloadCount: PropTypes.number,
     onSvgDownload: PropTypes.func.isRequired,
-    onJpgDownload: PropTypes.func.isRequired,
+    onImgDownload: PropTypes.func.isRequired,
 }
 
 export default PartDownload;

src/containers/app/PartDownloadViewer.js

@@ -3,7 +3,7 @@ import PartDownload from "../../components/app/PartDownload";
 import {saveImg, saveSvg} from "../../utils/downloader";
 import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/TcbHandler";
 import {getParamDetailedValue, outerHtml} from "../../utils/util";
-import {handleDownloadJpg, handleDownloadSvg} from "../../utils/gaHelper";
+import {handleDownloadImg, handleDownloadSvg} from "../../utils/gaHelper";
 
 function saveDB(state, type, updateDownloadData) {
     return new Promise(resolve => {
@@ -45,11 +45,11 @@ const mapStateToProps = (state, ownProps) => ({
         saveDB(state, 'svg', ownProps.updateDownloadData);
         handleDownloadSvg(state.value);
     },
-    onJpgDownload: () => {
+    onImgDownload: (type) => {
         return new Promise(resolve => {
-            saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500).then((res) => {
-                saveDB(state, 'jpg', ownProps.updateDownloadData).then(() => {
-                    handleDownloadJpg(state.value);
+            saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500, type).then((res) => {
+                saveDB(state, type, ownProps.updateDownloadData).then(() => {
+                    handleDownloadImg(state.value, type);
                     resolve(res)
                 });
             });

src/utils/downloader.js

@@ -1,6 +1,8 @@
 const svgHead = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n " +
     "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 20010904//EN\" \"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\">\n"
 
+const MIME = { "jpg": "image/jpeg", "png": "image/png" };
+
 export function saveSvg(value, content) {
     let htmlContent = [svgHead + content]
     let bl = new Blob(htmlContent, {type: "image/svg+xml"})
@@ -13,9 +15,11 @@ export function saveSvg(value, content) {
     a.click()
 }
 
-export function saveImg(value, content, width, height) {
+export function saveImg(value, content, width, height, type) {
+    if (!MIME[type]) throw "Error image type";
+
     // Finish creating downloadable data
-    let filename = "QRcode_" + value + ".jpg";
+    let filename = "QRcode_" + value + "." + type;
     const wrap = document.createElement('div');
     wrap.innerHTML = content;
 
@@ -48,7 +52,7 @@ export function saveImg(value, content, width, height) {
             // image opening in a new tab for others.
 
             let a = document.createElement('a');
-            let data = canvas.toDataURL('image/jpeg', 0.8);
+            let data = canvas.toDataURL(MIME[type], 0.8);
             a.setAttribute('href', data)
             a.setAttribute('target', 'download')
             a.setAttribute('download', filename);

src/utils/gaHelper.js

@@ -16,10 +16,10 @@ export function handleDownloadSvg(rendererName) {
     });
 }
 
-export function handleDownloadJpg(rendererName) {
+export function handleDownloadImg(rendererName, type) {
     ReactGA.event({
         category: 'Style',
-        action: 'DownloadJpg',
+        action: 'Download' + type.charAt(0).toUpperCase() + type.slice(1),
         label: rendererName,
     });
 }