Commit 85948dfe authored by IvyXia123's avatar IvyXia123

20190925长按图片保存

parent 7c1bcbf0
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=screen-orientation content=portrait><meta name=x5-orientation content=portrait><title>唱唱启蒙英语</title><link rel=stylesheet href=https://at.alicdn.com/t/font_822651_g9r2j7kybxu.css><style>*{ <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=screen-orientation content=portrait><meta name=x5-orientation content=portrait><title>唱唱启蒙英语</title><link rel=stylesheet href=https://at.alicdn.com/t/font_822651_g9r2j7kybxu.css><style>*{
-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:touch;
}</style><link href=https://static-cdn.changchangenglish.com/new-sing/static/css/app.d6110e53dd40d68d3dd6cc5bd6a74d26.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/manifest.1507830c4475ae4c0b35.js></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/vendor.e524f5cccf757e45c672.js></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/app.a554d802f74385323a68.js></script></body></html> }</style><link href=https://static-cdn.changchangenglish.com/new-sing/static/css/app.ee1848c0dbd4cf80db6ced47d13cccc0.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/manifest.b932856ce32bceffeda8.js></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/vendor.e524f5cccf757e45c672.js></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/app.a554d802f74385323a68.js></script></body></html>
\ No newline at end of file \ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
!function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,d,n){for(var t,r,o,i=0,u=[];i<c.length;i++)r=c[i],f[r]&&u.push(f[r][0]),f[r]=0;for(t in d)Object.prototype.hasOwnProperty.call(d,t)&&(e[t]=d[t]);for(a&&a(c,d,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=b(b.s=n[i]);return o};var c={},f={68:0};function b(a){if(c[a])return c[a].exports;var f=c[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,b),f.l=!0,f.exports}b.e=function(e){var a=f[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,b){a=f[e]=[c,b]});a[2]=c;var d=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.charset="utf-8",n.async=!0,n.timeout=12e4,n.crossOrigin="anonymous",b.nc&&n.setAttribute("nonce",b.nc),n.src=b.p+"static/js/"+({0:"vendor-async"}[e]||e)+"."+{0:"4c32bc423a8cfe2d0ff5",1:"117f6ed7a3ee919b672a",2:"8c1c0207d56d753f9571",3:"16311961e0c59cc998b3",4:"be216735a0b64ab3ce47",5:"393578607b3aebf89ef0",6:"08e83eb0dfcf2343cc4e",7:"80c5e00893b61183ab34",8:"f14a4f1010dca6e5193e",9:"059c7e45f34d8295df7b",10:"829dd34a338a8876260e",11:"d54a8e3a568fd71e91e0",12:"b359078bc3d4851fb6cf",13:"5f261ff92bd308d35b0a",14:"9c5198bb984a34250e40",15:"680770edee21a6988b29",16:"4e2fde87d00b5159c374",17:"a0f73eb864a9fa4e118f",18:"61a1e5b0497e3ee138e4",19:"439b5b5fbf7e4c848a89",20:"273b093d762342dc13e3",21:"835b8f0010b7d50fae37",22:"de7bba15b55985b31e42",23:"b472f163f760b1c77d7a",24:"549eeb0a889318a34e89",25:"7c99189125c19acc26f4",26:"0bcc8b19f145e79a3ed6",27:"7b328662e6fd4798982b",28:"00652dc08d949721ca64",29:"32e4a5b2a25f88c34451",30:"258cb6c3dd89fd6f6649",31:"77fdc3c527048308b86e",32:"2dff8b9a8317b3ee46df",33:"bea9c27ee77e0d04f95a",34:"30d52b0f77eb30590ac5",35:"a516f2b5d645a4908ce9",36:"5ab5240df93fe15c447e",37:"c801122af386260a690a",38:"c3d87252090be84edabd",39:"886c3383b261524be947",40:"15174c220598ff8dc8d8",41:"3b59527515857f0c374e",42:"e3a5350ac83edeede646",43:"67a88603a7889f50a700",44:"e425309e5d811dee70e5",45:"cddcf5c6789bdadc900b",46:"17ad6a93f9bde83665f9",47:"16567b7ee6b462bae443",48:"59ace6c90fdc04aadaf0",49:"9b89ae75df502b1ea6f0",50:"9ba5d108d438a4ec16d6",51:"197b68e6bc331faa87ce",52:"0656187e0a24fb0d10ce",53:"e722b9b1c8823635085c",54:"027bcbce5d0ff03697fb",55:"eee5e26f247074851331",56:"c1875a7d41d621d3035e",57:"c9895d4f61a09c5a2000",58:"d1e010a5dcc9365a522d",59:"0411a8ac60d1a00f0916",60:"7bcb86f14a169b3ea7c3",61:"2215e90e6a93dc29d9f6",62:"aa7ec3be34fb9f9846b4",63:"380a8bf6726ee063ccaa",64:"17c522e0623f5ccbbcd6",65:"4dbf6e5a2b902078ea89"}[e]+".js";var t=setTimeout(r,12e4);function r(){n.onerror=n.onload=null,clearTimeout(t);var a=f[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}return n.onerror=n.onload=r,d.appendChild(n),c},b.m=e,b.c=c,b.d=function(e,a,c){b.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},b.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return b.d(a,"a",a),a},b.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},b.p="https://static-cdn.changchangenglish.com/new-sing/",b.oe=function(e){throw e}}([]); !function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,d,n){for(var t,r,o,i=0,u=[];i<c.length;i++)r=c[i],f[r]&&u.push(f[r][0]),f[r]=0;for(t in d)Object.prototype.hasOwnProperty.call(d,t)&&(e[t]=d[t]);for(a&&a(c,d,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=b(b.s=n[i]);return o};var c={},f={68:0};function b(a){if(c[a])return c[a].exports;var f=c[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,b),f.l=!0,f.exports}b.e=function(e){var a=f[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,b){a=f[e]=[c,b]});a[2]=c;var d=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.charset="utf-8",n.async=!0,n.timeout=12e4,n.crossOrigin="anonymous",b.nc&&n.setAttribute("nonce",b.nc),n.src=b.p+"static/js/"+({0:"vendor-async"}[e]||e)+"."+{0:"4c32bc423a8cfe2d0ff5",1:"c23de41329b2a1ec3220",2:"6e8d823bf12e7f6aae23",3:"16311961e0c59cc998b3",4:"be216735a0b64ab3ce47",5:"393578607b3aebf89ef0",6:"08e83eb0dfcf2343cc4e",7:"80c5e00893b61183ab34",8:"f14a4f1010dca6e5193e",9:"059c7e45f34d8295df7b",10:"829dd34a338a8876260e",11:"d54a8e3a568fd71e91e0",12:"b359078bc3d4851fb6cf",13:"5f261ff92bd308d35b0a",14:"9c5198bb984a34250e40",15:"680770edee21a6988b29",16:"4e2fde87d00b5159c374",17:"a0f73eb864a9fa4e118f",18:"61a1e5b0497e3ee138e4",19:"439b5b5fbf7e4c848a89",20:"273b093d762342dc13e3",21:"835b8f0010b7d50fae37",22:"de7bba15b55985b31e42",23:"b472f163f760b1c77d7a",24:"549eeb0a889318a34e89",25:"7c99189125c19acc26f4",26:"0bcc8b19f145e79a3ed6",27:"7b328662e6fd4798982b",28:"00652dc08d949721ca64",29:"32e4a5b2a25f88c34451",30:"258cb6c3dd89fd6f6649",31:"77fdc3c527048308b86e",32:"2dff8b9a8317b3ee46df",33:"bea9c27ee77e0d04f95a",34:"30d52b0f77eb30590ac5",35:"a516f2b5d645a4908ce9",36:"5ab5240df93fe15c447e",37:"c801122af386260a690a",38:"c3d87252090be84edabd",39:"886c3383b261524be947",40:"15174c220598ff8dc8d8",41:"3b59527515857f0c374e",42:"e3a5350ac83edeede646",43:"67a88603a7889f50a700",44:"e425309e5d811dee70e5",45:"cddcf5c6789bdadc900b",46:"17ad6a93f9bde83665f9",47:"16567b7ee6b462bae443",48:"59ace6c90fdc04aadaf0",49:"9b89ae75df502b1ea6f0",50:"9ba5d108d438a4ec16d6",51:"197b68e6bc331faa87ce",52:"0656187e0a24fb0d10ce",53:"e722b9b1c8823635085c",54:"027bcbce5d0ff03697fb",55:"eee5e26f247074851331",56:"c1875a7d41d621d3035e",57:"c9895d4f61a09c5a2000",58:"d1e010a5dcc9365a522d",59:"0411a8ac60d1a00f0916",60:"7bcb86f14a169b3ea7c3",61:"2215e90e6a93dc29d9f6",62:"aa7ec3be34fb9f9846b4",63:"380a8bf6726ee063ccaa",64:"17c522e0623f5ccbbcd6",65:"4dbf6e5a2b902078ea89"}[e]+".js";var t=setTimeout(r,12e4);function r(){n.onerror=n.onload=null,clearTimeout(t);var a=f[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}return n.onerror=n.onload=r,d.appendChild(n),c},b.m=e,b.c=c,b.d=function(e,a,c){b.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},b.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return b.d(a,"a",a),a},b.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},b.p="https://static-cdn.changchangenglish.com/new-sing/",b.oe=function(e){throw e}}([]);
\ No newline at end of file \ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class='box'> <div class='box'>
<div class="share-page" id="capture"> <div class="share-page" id="capture">
<div class="share-block"> <div class="share-block">
<div class="content" v-if="userDetail" ref="imageWrapper"> <!-- v-if="userDetail" --> <div class="content" ref="imageWrapper"> <!-- v-if="userDetail" -->
<img :src="img_logo" class="imgLogo" /> <img :src="img_logo" class="imgLogo" />
<div class="main-content"> <div class="main-content">
<div class="topBox"> <div class="topBox">
...@@ -33,8 +33,7 @@ ...@@ -33,8 +33,7 @@
</div> </div>
<div class="text1">已在唱唱学习</div> <div class="text1">已在唱唱学习</div>
<div class="text2"> <div class="text2">
<span>{{dataSession.total_day}}</span> <span>{{dataSession.total_day}}</span>
<br />
</div> </div>
</div> </div>
<div class="item"> <div class="item">
...@@ -43,8 +42,7 @@ ...@@ -43,8 +42,7 @@
</div> </div>
<div class="text1">今天学习了</div> <div class="text1">今天学习了</div>
<div class="text2"> <div class="text2">
<span>{{minute}}</span> <span>{{minute}}</span>分钟
<br />分钟
</div> </div>
</div> </div>
<div class="item"> <div class="item">
...@@ -103,7 +101,6 @@ ...@@ -103,7 +101,6 @@
</div>--> </div>-->
</div> </div>
</div> </div>
<canvas id="canvas"></canvas>
<img class="canvasImg" @touchstart="touchStart" @touchend="touchEnd" :src="canvasData" alt /> <!-- @touchstart="touchStart" --> <img class="canvasImg" @touchstart="touchStart" @touchend="touchEnd" :src="canvasData" alt /> <!-- @touchstart="touchStart" -->
<div class="test"></div> <div class="test"></div>
<div class="white-pannel"> <div class="white-pannel">
...@@ -151,8 +148,6 @@ ...@@ -151,8 +148,6 @@
import share_code_bg from "../../assets/newLesson/share-code-bg.png"; import share_code_bg from "../../assets/newLesson/share-code-bg.png";
import img_logo from "../../assets/newLesson/logo@2x.png"; import img_logo from "../../assets/newLesson/logo@2x.png";
import share_tips from "../../assets/Bitmap@2x.png"; import share_tips from "../../assets/Bitmap@2x.png";
import canvas_bg_1 from "@/assets/share/canvas_bg_1.png";
import canvas_bg_2 from "@/assets/share/canvas_bg_2.png";
export default { export default {
name: "share", name: "share",
...@@ -197,26 +192,14 @@ ...@@ -197,26 +192,14 @@
starNum: 0, starNum: 0,
avatarActive: '', avatarActive: '',
nicknameActive: '', nicknameActive: '',
dataSession: {}, dataSession: {}
shareConBg: ''
}; };
}, },
props: ["route", "totalStarNum"], props: ["route", "totalStarNum"],
mounted() { mounted() {
// 判断星星 // 判断星星
this.dataSession = JSON.parse(window.sessionStorage.query) // this.dataSession = JSON.parse(window.sessionStorage.query)
//console.log(window.sessionStorage.query); console.log(window.sessionStorage.query);
getUserDetailApi()
.then(res => {
console.log(res)
this.avatarActive = res.avatar
this.nicknameActive = res.nickname
localStorage.setItem("userDesc", JSON.stringify(res));
})
.catch(res => {
if (localStorage.getItem("userDesc")) {
}
});
this.starNum = JSON.parse(localStorage.getItem('lessonDetail')).star_num this.starNum = JSON.parse(localStorage.getItem('lessonDetail')).star_num
console.log(this.starNum) console.log(this.starNum)
...@@ -236,9 +219,9 @@ ...@@ -236,9 +219,9 @@
let query = JSON.parse(sessionStorage.getItem("classQuery")); let query = JSON.parse(sessionStorage.getItem("classQuery"));
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
// minute // minute
/*postErrorLogApi({'routes_url':new Date().toString(),'result_text':this.userDetail.user_id}).then((res)=>{ postErrorLogApi({'routes_url':new Date().toString(),'result_text':this.userDetail.user_id}).then((res)=>{
console.log(res) console.log(res)
})*/ })
this.$sa.track("watchClick", { this.$sa.track("watchClick", {
dayModule: JSON.parse( dayModule: JSON.parse(
localStorage.getItem("lessonDetail") localStorage.getItem("lessonDetail")
...@@ -350,17 +333,32 @@ ...@@ -350,17 +333,32 @@
// debugger // debugger
this.lesson = JSON.parse(localStorage.getItem("lessonDetail")); this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
this.lesson.domTitle = this.lesson.domTitle.substring(0, 9); this.lesson.domTitle = this.lesson.domTitle.substring(0, 9);
// console.log(this.watchDetail, 170); console.log(this.watchDetail, 170);
// console.log(this.lesson); console.log(this.lesson);
this.lastTime = Date.parse(new Date()); this.lastTime = Date.parse(new Date());
clearInterval(this.$store.state.timeout); clearInterval(this.$store.state.timeout);
this.userDetail = JSON.parse(localStorage.getItem("userDesc")); this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
console.log(this.userDetail, 2323)
this.nickname = this.userDetail.nickname; this.nickname = this.userDetail.nickname;
if (this.nickname.length >= 6) { if (this.nickname.length >= 6) {
this.nickname = this.nickname.slice(0, 4) + "..."; this.nickname = this.nickname.slice(0, 4) + "...";
} }
getUserDetailApi()
.then(res => {
console.log(res, 87878787)
this.avatarActive = res.avatar
this.nicknameActive = res.nickname
localStorage.setItem("userDesc", JSON.stringify(res));
})
.catch(res => {
if (localStorage.getItem("userDesc")) {
}
});
getUserWatchApi().then(res => {
this.dataSession = res
this.minute = (parseInt(this.dataSession.stay_time) / 60).toFixed(); this.minute = (parseInt(this.dataSession.stay_time) / 60).toFixed();
if (this.minute < 1) { if (this.minute < 1) {
this.minute = 1; this.minute = 1;
} }
...@@ -378,10 +376,12 @@ ...@@ -378,10 +376,12 @@
this.imgPoint = great; this.imgPoint = great;
} else { } else {
this.$store.dispatch("setLookStatus", 2); this.$store.dispatch("setLookStatus", 2);
// console.log(Math.floor(39 * Math.random())); console.log(Math.floor(39 * Math.random()));
this.percent = 96 + Math.floor(39 * Math.random()) / 10; this.percent = 96 + Math.floor(39 * Math.random()) / 10;
this.imgPoint = perfect; this.imgPoint = perfect;
} }
})
// Toast.clear(); // Toast.clear();
let query = JSON.parse(sessionStorage.getItem("classQuery")); let query = JSON.parse(sessionStorage.getItem("classQuery"));
let obj = { let obj = {
...@@ -397,7 +397,7 @@ ...@@ -397,7 +397,7 @@
// 'https://wechat.changchangenglish.com/' + // 'https://wechat.changchangenglish.com/' +
// "#/shareGoods?info=" + // "#/shareGoods?info=" +
// encodeURIComponent(JSON.stringify(obj)); // encodeURIComponent(JSON.stringify(obj));
// console.log(URL); console.log(URL);
this.onShare(URL); this.onShare(URL);
this.toDataURLBase64( this.toDataURLBase64(
this.userDetail.avatar.replace("http://", "https://"), this.userDetail.avatar.replace("http://", "https://"),
...@@ -417,7 +417,7 @@ ...@@ -417,7 +417,7 @@
setTimeout(() => { setTimeout(() => {
this.oimgPoint = true; this.oimgPoint = true;
}, 900); }, 900);
/* setTimeout(() => { setTimeout(() => {
that.$nextTick(() => { that.$nextTick(() => {
if (document.getElementById("capture")) { if (document.getElementById("capture")) {
html2canvas(document.getElementById("capture"), { html2canvas(document.getElementById("capture"), {
...@@ -441,51 +441,7 @@ ...@@ -441,51 +441,7 @@
}); });
} }
}); });
}, 1200);*/ }, 1200);
setTimeout(() => {
this.animationBg = true;
this.canvasImg();
}, 3000);
},
canvasImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const canvasImage = new Image();
if (this.totalStarNum == 3) {
canvasImage.src = canvas_bg_1;
} else {
canvasImage.src = canvas_bg_2;
}
let that = this;
canvasImage.onload = function () {
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
that.fillTextFn(ctx, "7vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#fff", `${that.nicknameActive}家宝宝`, 360, 265);
that.fillTextFn(ctx, "bold 11vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#ec7e1f", that.dataSession.total_day, 150, 540);
that.fillTextFn(ctx, "bold 11vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#ec7e1f", that.minute, 360, 540);
that.fillTextFn(ctx, "bold 11vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#ec7e1f", `${that.percent}%`, 580, 540);
that.fillTextFn(ctx, "bold 11vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#1d6588", that.lesson.title, 360, 840);
that.fillTextFn(ctx, "9vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#1d6588", that.lesson.domTitle, 360, 900);
const avatarImage = new Image();
avatarImage.setAttribute("crossOrigin",'Anonymous');
avatarImage.src = that.avatarActive;
avatarImage.onload = function() {
ctx.arc(357, 173, 60, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(this, 297, 113, 120, 120);
let dataURL = canvas.toDataURL("image/jpg", 1.0);
that.canvasData = dataURL;
};
};
},
fillTextFn(ctx, font, color, title, x, y) {
ctx.font = font;
ctx.textAlign = "center";
ctx.fillStyle = color;
ctx.fillText(title, x, y);
}, },
enableShare: function(option) { enableShare: function(option) {
let query = JSON.parse(sessionStorage.getItem("classQuery")); let query = JSON.parse(sessionStorage.getItem("classQuery"));
...@@ -720,7 +676,7 @@ ...@@ -720,7 +676,7 @@
}); });
}, },
onShare(URL) { onShare(URL) {
// console.log(451); console.log(451);
if (this.watchDetail && this.watchDetail.total_day) { if (this.watchDetail && this.watchDetail.total_day) {
this.enableShare({ this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】唱学英语,已坚持${this.watchDetail.total_day}天`, // 分享标题 product_title: `我家宝宝正在【唱唱启蒙英语】唱学英语,已坚持${this.watchDetail.total_day}天`, // 分享标题
...@@ -918,9 +874,6 @@ ...@@ -918,9 +874,6 @@
width: 100%; width: 100%;
z-index: 1300; z-index: 1300;
} }
#canvas {
display: none;
}
.white-pannel { .white-pannel {
position: absolute; position: absolute;
z-index: 1301; z-index: 1301;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment