diff --git a/src/components/app/PartDownload.js b/src/components/app/PartDownload.js
index 1abef19..1c34176 100644
--- a/src/components/app/PartDownload.js
+++ b/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 (
+
+
+
+
+
+ )
+ }
+ return null
+}
+
+const PartDownload = ({ value, downloadCount, onSvgDownload, onImgDownload }) => {
const [imgData, setImgData] = useState('');
return (
@@ -30,22 +43,16 @@ const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) =>
-
+
+
-
- {
- imgData.length > 0 ?
: null
- }
+
@@ -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;
diff --git a/src/containers/app/PartDownloadViewer.js b/src/containers/app/PartDownloadViewer.js
index 35f6c62..0d07225 100644
--- a/src/containers/app/PartDownloadViewer.js
+++ b/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)
});
});
diff --git a/src/utils/downloader.js b/src/utils/downloader.js
index 67a5fec..b19da31 100644
--- a/src/utils/downloader.js
+++ b/src/utils/downloader.js
@@ -1,6 +1,8 @@
const svgHead = "\n " +
"\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);
diff --git a/src/utils/gaHelper.js b/src/utils/gaHelper.js
index 8716ca5..c9eb730 100644
--- a/src/utils/gaHelper.js
+++ b/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,
});
}