Skip to content

T
techbook
Commit 4cc28f8f authored by zhangyanni's avatar zhangyanni
Browse files
Options

分享需求和分享项目页面

parent 9a8ac826
Hide whitespace changes
Inline Side-by-side
Showing with 918 additions and 10 deletions
public/css/phone.scss 0 → 100644
View file @ 4cc28f8f
/*reset*/
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
html,body{
font-size: 0.32rem;
}
body {
font-family:"Microsoft Yahei", Arial, Helvetica, sans-serif,PingFangSC-Regular;
background-color: #fff;
color: #3F3F53;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
table {
border-collapse: collapse;
border-spacing: 0
}
ul, ol, dd, dt, dl {
list-style: none;
}
a {
color: #3F3F53;
text-decoration: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
a, input, select {
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0;
}
input, img {
border: none;
padding: 0;
font-size: 14px;
}
i, em {
font-style: normal;
}
:focus {
outline: none
}
/*iphone6*/
@media (min-device-width: 375px)and(max-device-width: 667px)and(-webkit-min-device-pixel-ratio: 2) {
body {
font-size: 14.5px;
}
}
/*iphone6plus*/
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
body {
font-size: 15.5px;
}
}
/*原子类*/
.clear {
clear: both;
}
.clear:after {
display: block;
clear: both;
visibility: hidden;
height: 0;
overflow: hidden;
content: ".";
}
.fl {
float: left;
}
.fr {
float: right;
}
.mb10 {
margin-bottom: 10px;
}
.mt10 {
margin-top: 10px;
}
/*placeholder css*/
::-webkit-input-placeholder {
font-family: "Microsoft YaHei";
font-size: 0.32rem;
color: #9EA5B1;
font-weight: 500;
}
::-moz-placeholder {
font-family: "Microsoft YaHei";
font-size: 0.32rem;
color: #9EA5B1;
font-weight: 500;
}
::-webkit-input-placeholder {
font-family: "Microsoft YaHei";
font-size: 0.32rem;
color: #9EA5B1;
font-weight: 500;
}
:-ms-input-placeholder {
font-family: "Microsoft YaHei";
font-size: 0.32rem;
color: #9EA5B1;
font-weight: 500;
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html, body, #app {
height: 100%;
}
img {
border: none;
vertical-align: middle;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
input, textarea {
outline: none;
border: none;
}
textarea {
resize: none;
overflow: auto;
}
/* 去除Chrome等浏览器文本框默认发光边框 */
input:focus,
textarea:focus {
outline: none;
}
input,
textarea {
border: 0;
/* 方法1 */
-webkit-appearance: none;
/* 方法2 */
}
/*单行省略......*/
.dwote {
display: inline-block;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/*多行行省略......*/
.dwwo-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
#app{
background-color: #fff;
}
.phoneWrapper{
width: 100%;
}
.phoneTopNav {
height: 1rem;
display: flex;
align-items: center;
background: #fff;
padding: 0 .4rem;
& > img {
height: .42rem;
}
& > span.verticalSpre {
margin: .2rem;
}
& > span {
font-size: .24rem;
color: #A8A8A8;
font-weight: bold;
}
}
.phoneBanner {
/*height: 6.4rem;*/
width: 100%;
background: url("../../src/assets/img/index/Bitmap@2x.jpg") no-repeat;
/*background-position:center;*/
background-size: cover;
padding: 0 .4rem;
padding-bottom: .4rem;
color: #fff;
border-top: 1px solid transparent;
& > p, & > div {
width: 100%;
text-align: center;
margin: 0 auto;
}
.imgWrap {
background: #fff;
width: 1.5rem;
height: 1.5rem;
border-radius: 0.06rem;
margin-top: .8rem;
margin-bottom: .4rem;
}
& .logoImg {
width: 1.5rem;
height: 1.5rem;
border-radius: 0.06rem;
}
.shareTitle {
font-size: .34rem;
font-weight: bold;
margin-bottom: .4rem;
}
.shareCompany {
font-size: .28rem;
font-weight: normal;
margin-bottom: .4rem;
}
.shareFlag {
font-size: .24rem;
font-weight: normal;
& > span {
display: inline-block;
height: .46rem;
padding: 0 .15rem;
line-height: .46rem;
background: #4C65E3;
border-radius: 0.06rem;
margin-right: .1rem;
margin-top: .2rem;
}
}
}
.shareMain {
padding: 0 .3rem;
margin-top: .4rem;
.mainTitle {
font-size: .3rem;
height: .7rem;
position: relative;
border-bottom: 0.03rem solid #E8EAF3;
& > span {
display: inline-block;
height: 100%;
width: 1.44rem;
font-weight: bold;
padding-left: .1rem;
}
}
}
.height2px {
position: absolute;
left: 0;
bottom: -0.03rem;
height: 0.03rem;
background: #5D78FF;
width: 1.44rem;
z-index: 100;
}
.mainContent {
padding: .35rem .4rem .4rem .1rem;
&>p{
font-size: .28rem;
margin: .1rem;
&>span{
display: inline-block;
line-height: .4rem;
}
&>span:first-child{
display: inline-block;
width: 2rem;
font-weight: bold;
vertical-align: top;
text-align: right;
}
&>span:last-child{
display: inline-block;
width: calc(100% - 2rem);
font-weight: normal;
&>span{
display: block;
margin-bottom: .25rem;
}
&>span.flagIndustry{
display: inline-block;
height: .5rem;
line-height: .5rem;
color: #5D78FF;
border: 1px solid #5D78FF;
padding: 0 .2rem;
margin-right: .1rem;
margin-bottom: .2rem;
border-radius: 0.06rem;
}
}
}
}
.shareBottomNav{
width: 100%;
background: #1E1E2D;
text-align: center;
padding: .88rem 0;
color: #fff;
margin-bottom: 1rem;
& img{
display: inline-block;
}
&>p{
margin: .2rem 0;
}
&>p:first-child{
margin-bottom: .36rem;
img{
height: .4rem;
}
}
&>p:last-child{
margin-top: .36rem;
img{
width: 2.5rem;
height: 2.5rem;
}
}
}
.shareButton{
width: 100%;
height: 1rem;
line-height: 1rem;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
background: #fff;
box-shadow:0px -5px 10px 0px rgba(0,0,0,0.1);
&>span{
padding: 0 .5rem;
-webkit-border-radius: 0.06rem;
-moz-border-radius: 0.06rem;
border-radius: 0.06rem;
display: inline-block;
height: .6rem;
line-height: .6rem;
background: #5D78FF;
text-align: center;
color: #fff;
font-size: .24rem;
font-weight: bold;
}
}
\ No newline at end of file
src/App.vue
View file @ 4cc28f8f
......@@ -6,3 +6,51 @@
<style lang="scss">
</style>
<script>
export default {
data(){
return {
}
},
methods:{
appendH5(){
var oMeta = document.createElement('meta');
oMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=0';
oMeta.name = 'viewport';
document.getElementsByTagName('head')[0].appendChild(oMeta);
let script = document.createElement('script');
script.type = 'text/javascript'
script.text = `(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);`
document.getElementsByTagName('head')[0].appendChild(script)
},
//是否手机端
_isMobile(){
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
localStorage.setItem('ismobile',flag?1:0)
if(flag) this.appendH5();
}
},
created(){
this._isMobile();
}
}
</script>
src/main.js
View file @ 4cc28f8f
......@@ -3,7 +3,6 @@ import App from './App.vue'
import router from './router'
import store from './store'
import Element from 'element-ui'
import '../public/css/common.scss'
import './assets/font/iconfont.css'
import vueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' //引入样式
......@@ -19,7 +18,19 @@ Vue.use(Element);
Vue.use(VueI18n);
window.Promise = Promise;
var type = navigator.appName,language;
var ismobile = localStorage.getItem('ismobile');
if(ismobile == null){
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
ismobile = flag ? 1 : 0
}
// 手机
if (ismobile == 1) {
require('../public/css/phone.scss');
}else{
require('../public/css/common.scss')
}
if(!window.localStorage.getItem("language")){
if(type=="Netscape"){
language =navigator.language;
......@@ -80,20 +91,23 @@ router.beforeEach((to, from, next) => {
if (i18n.locale == "zh-CN") router.replace('/mobileRegisterCmpt');
}
if(window.localStorage.getItem("userInfo") ==null){
if(to.path == '/useHelp' ||to.path == '/lndustryfocus' ||to.path == '/aboutwe' || to.name == 'dashboard' || to.name == 'login' || to.name == 'mobileLoginCmpt'|| to.name == 'emailLoginCmpt'|| to.name == 'mobileRegisterCmpt'|| to.name == 'emailRegisterCmpt'|| to.name == 'successCmpt'||to.name=='findPasswordCmpt'||to.name=='modifyPasswordCmpt'||to.name=='passSuccessCmpt'){
if(to.path == '/useHelp' ||to.path == '/lndustryfocus' ||to.path == '/aboutwe' || to.name == 'dashboard' || to.name == 'login' || to.name == 'mobileLoginCmpt'|| to.name == 'emailLoginCmpt'|| to.name == 'mobileRegisterCmpt'|| to.name == 'emailRegisterCmpt'|| to.name == 'successCmpt'||to.name=='findPasswordCmpt'||to.name=='modifyPasswordCmpt'||to.name=='passSuccessCmpt'||to.name=='shareRequire'||to.name=='shareProject'){
}else{
router.replace('/login');
}
}else{
api.isLoginAxios().then((res)=>{
if(res.code==90){
window.localStorage.removeItem("userInfo");
router.replace('/');
}
}).catch((err)=>{
this.$message.error(err)
})
if(to.name!='shareRequire'&&to.name!='shareProject'){
api.isLoginAxios().then((res)=>{
if(res.code==90){
window.localStorage.removeItem("userInfo");
router.replace('/');
}
}).catch((err)=>{
this.$message.error(err)
})
}
}
});
......
src/router.js
View file @ 4cc28f8f
......@@ -39,6 +39,8 @@ import saleRecordDetail from './views/saleManage/projectManage/pages/recordDetai
import saleRecordAdd from './views/saleManage/projectManage/pages/recordAdd';//工作记录详情
import mixSearch from './views/bigbusiness/pages/searchRecord';//搜索
import editBasicInfo from './views/bigbusiness/pages/editBasic';//编辑基本信息
import shareRequire from './views/share/require';//分享需求
import shareProject from './views/share/project';//分享项目
Vue.use(Router)
export default new Router({
......@@ -394,5 +396,15 @@ export default new Router({
},
]
},
{
path:"/share/require",
name:"shareRequire",
component:shareRequire
},
{
path:"/share/project",
name:"shareProject",
component:shareProject
}
]
})
src/views/share/project.vue 0 → 100644
View file @ 4cc28f8f
<template>
<div>
<div class="phoneWrapper" ref="imageDom">
<div class="phoneTopNav">
<img src="../../assets/img/index/techbook-LOGO-01@2x.png" alt="">
<span class="verticalSpre">|</span>
<span>{{$t("topNav.logoTitle")}}</span>
</div>
<div class="phoneBanner" v-if="companyInfo">
<p class="imgWrap">
<img :src="detailInfo.companyLogoUrl?detailInfo.companyLogoUrl:require('../../assets/img/smallBusiness@2x.png')"
alt="" class="logoImg">
</p>
<p class="shareTitle">
{{detailInfo.projectName}}
</p>
<p class="shareCompany">
{{detailInfo.companyName}}
</p>
<p class="shareFlag" v-if="companyInfo.companyLabel">
<span v-for="item in companyInfo.companyLabelList">{{item}}</span>
</p>
</div>
<div class="shareMain">
<div class="mainTitle">
<span style="width: 2.3rem;">
项目基础信息
</span>
<div class="height2px" style="width: 2.0rem;"></div>
</div>
<div class="mainContent">
<p><span>网址：</span><span>{{detailInfo.companyWebsite?detailInfo.companyWebsite:"暂无"}}</span></p>
<p><span>公众号：</span><span>{{detailInfo.officialAccount?detailInfo.officialAccount:"暂无"}}</span></p>
<p>
<span>所属行业：</span>
<span>
<span v-for="item in detailInfo.projectIndustryList">{{item}}</span>
</span>
</p>
<p><span>产品形态：</span><span>{{detailInfo.projectModel?detailInfo.projectModel:"暂无"}}</span></p>
<p><span>产品阶段：</span><span>{{detailInfo.projectPhase?detailInfo.projectPhase:"暂无"}}</span></p>
<p><span>产品概述：</span>
<span>
{{detailInfo.projectInstroduction?detailInfo.projectInstroduction:"暂无"}}
</span>
</p>
</div>
</div>
<div class="shareMain">
<div class="mainTitle">
<span style="width: 2.3rem;">
市场合作需求
</span>
<div class="height2px" style="width: 2.0rem;"></div>
</div>
<div class="mainContent">
<p style="color: #5D78FF;height: 2rem;padding-top: .9rem;text-align: center">请登录TechBook查看</p>
</div>
</div>
<div class="shareMain">
<div class="mainTitle">
<span>
公司概况
</span>
<div class="height2px"></div>
</div>
<div class="mainContent">
<p style="color: #5D78FF;height: 2rem;padding-top: .9rem;text-align: center">请登录TechBook查看</p>
</div>
</div>
<div class="shareBottomNav">
<p><img src="../../assets/img/index/techbook-LOGO-02@2x.png" alt=""></p>
<p>www.techbook.com</p>
<p>400-6788258</p>
<p>tb@techcode.com</p>
<p><img src="../../assets/img/index/Bitmap@2x(7).png" alt=""></p>
</div>
</div>
<div class="shareButton">
<span @click="clickGeneratePicture">点击下载</span>
</div>
<div v-if="imgUrl">
<img :src="imgUrl" id="img" alt="" style="width: 100%;">
</div>
</div>
</template>
<script>
import api from '../innovatecompany/lreleaseproject/api/api';
import html2canvas from "html2canvas";
export default {
name: "require",
data() {
return {
companyInfo: {},
detailInfo: {},
imgUrl:"",
photoShow:false
}
},
methods: {
//获取需求详情信息
getRequireDetail() {
api.selectProjectById(this.$route.query.id).then((res) => {
if (res.code == 0) {
this.detailInfo = res.result;
this.detailInfo.projectIndustryList = res.result.projectIndustryList?res.result.projectIndustryList.split(','):[];
this.detailInfo.targetList = res.result.targetLabel ? res.result.targetLabel.split(',') : [];
this.detailInfo.targetIndustryList = res.result.targetIndustryStr ? res.result.targetIndustryStr.split(',') : [];
if (res.result.annexFileMap) {
for (var i in res.result.annexFileMap) {
this.detailInfo.annexFile = i;
}
}
this.getCompanyInfoById(res.result.businessId);
} else {
this.$message.error(res.msg);
}
}).catch((err) => {
this.$message.error(err)
})
},
//根据id获取企业信息
getCompanyInfoById(data) {
api.getCompanyInfoById(data).then((res) => {
if (res.code == 0) {
this.companyInfo = res.result;
this.companyInfo.industryList = res.result.companyIndustryStr ? res.result.companyIndustryStr.split(",") : [];
this.companyInfo.companyLabelList = res.result.companyLabel ? res.result.companyLabel.split(",") : [];
} else {
this.$message.error(res.msg);
}
}).catch((err) => {
this.$message.error(err);
})
},
clickGeneratePicture() {
let _this = this;
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
setTimeout(function () {
// // 声明一个画布元素,存储需下载图片范围
let canvas = document.createElement("canvas");
// 获取需下载范围元素
let img = document.querySelector('.phoneWrapper');
// 图片高度
var w = parseInt(window.getComputedStyle(img).width);
// 图片宽度
var h = parseInt(window.getComputedStyle(img).height);
// 声明画布宽高
canvas.width = w;
canvas.height = h;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
// html2canvas(img, {
// canvas: canvas,
// useCORS: true,
// }).then(canvas => {
// canvas.toBlob((blob) => {
// console.log(blob)
// })
// console.log(canvas)
// // 转成图片，生成图片地址
// // document.body.appendChild(canvas.toDataURL("image/png"))
// // _this.imgUrl = canvas.toDataURL("image/jpg");
// });
// _this.photoShow = true;
// // 声明一个画布元素,存储需下载图片范围
// let canvas = document.createElement("canvas");
// // 获取需下载范围元素
// let img = document.querySelector('.phoneWrapper');
// // 图片高度
// var w = parseInt(window.getComputedStyle(img).width);
// // 图片宽度
// var h = parseInt(window.getComputedStyle(img).height);
// // 声明画布宽高
// canvas.width = w;
// canvas.height = h;
// canvas.style.width = w + "px";
// canvas.style.height = h + "px";
// console.log(w, h);
// let context = canvas.getContext("2d");
// context.scale(2, 2);
// 利用 html2canvas 下载 canvas
html2canvas(img, {
canvas: canvas,
backgroundColor: "#fff",
useCORS: true, // 允许图片跨域
taintTest: true, // 在渲染前测试图片
}).then(function(canvas) {
_this.imgUrl = canvas.toDataURL()
console.log(_this.imgUrl)
});
},0);
},
},
mounted() {
this.getRequireDetail();
}
}
</script>
<style scoped lang="scss">
</style>
\ No newline at end of file
src/views/share/require.vue 0 → 100644
View file @ 4cc28f8f
<template>
<div>
<div class="phoneWrapper" ref="imageDom">
<div class="phoneTopNav">
<img src="../../assets/img/index/techbook-LOGO-01@2x.png" alt="">
<span class="verticalSpre">|</span>
<span>{{$t("topNav.logoTitle")}}</span>
</div>
<div class="phoneBanner" v-if="companyInfo">
<p class="imgWrap">
<img :src="companyInfo.companyLogoUrl?companyInfo.companyLogoUrl:require('../../assets/img/bigBusiness@2x.png')"
alt="" class="logoImg">
</p>
<p class="shareTitle">
{{detailInfo.requirementName}}
</p>
<p class="shareCompany">
{{companyInfo.companyName}}
</p>
<p class="shareFlag" v-if="companyInfo.companyLabel">
<span v-for="item in companyInfo.companyLabelList">{{item}}</span>
</p>
</div>
<div class="shareMain">
<div class="mainTitle">
<span>
需求信息
</span>
<div class="height2px"></div>
</div>
<div class="mainContent">
<p><span>需求结束时间：</span><span>2011-10-20</span></p>
<p><span>技术来源地：</span><span>{{detailInfo.sourceNationStr+(detailInfo.sourceProvinceStr?'-'+detailInfo.sourceProvinceStr+'-'+detailInfo.sourceCityStr:"")}}</span></p>
<p>
<span>目标行业领域：</span>
<span>
<span v-for="item in detailInfo.targetIndustryList">{{item}}</span>
</span>
</p>
<p>
<span>合作领域标签：</span>
<span>
<span class="flagIndustry" v-if="detailInfo.targetLabel" v-for="item in detailInfo.targetList">{{item}}</span>
<span v-if="!detailInfo.targetLabel">暂无</span>
</span>
</p>
<p><span>产品概述：</span>
<span>
{{detailInfo.requirementContent?detailInfo.requirementContent:"暂无"}}
</span>
</p>
</div>
</div>
<div class="shareMain">
<div class="mainTitle">
<span>
基本信息
</span>
<div class="height2px"></div>
</div>
<div class="mainContent">
<p><span>网址：</span><span>{{companyInfo.companyWebsite?companyInfo.companyWebsite:"暂无"}}</span></p>
<p><span>公众号：</span><span>{{companyInfo.publicNumber?companyInfo.publicNumber:"暂无"}}</span></p>
<p>
<span>所属行业：</span>
<span>
<span v-for="item in companyInfo.industryList">{{item}}</span>
</span>
</p>
<p>
<span>公司创建时间：</span>
<span>
<span>{{companyInfo.companyCreateDate}}</span>
</span>
</p>
<p><span>公司规模：</span>
<span>
{{companyInfo.companyScaleStr}}
</span>
</p>
</div>
</div>
<div class="shareBottomNav">
<p><img src="../../assets/img/index/techbook-LOGO-02@2x.png" alt=""></p>
<p>www.techbook.com</p>
<p>400-6788258</p>
<p>tb@techcode.com</p>
<p><img src="../../assets/img/index/Bitmap@2x(7).png" alt=""></p>
</div>
</div>
<div class="shareButton">
<span @click="clickGeneratePicture">点击下载</span>
</div>
<div v-if="imgUrl">
<img :src="imgUrl" id="img" alt="" style="width: 100%;">
</div>
</div>
</template>
<script>
import api from '../bigbusiness/api/api';
import html2canvas from "html2canvas";
export default {
name: "require",
data() {
return {
companyInfo: {},
detailInfo: {},
imgUrl:"",
photoShow:false
}
},
methods: {
//获取需求详情信息
getRequireDetail() {
let params = {
detailId: this.$route.query.id
};
api.getRequireDetailListAxios(params).then((res) => {
if (res.code == 0) {
this.detailInfo = res.result;
this.detailInfo.targetList = res.result.targetLabel ? res.result.targetLabel.split(',') : [];
this.detailInfo.targetIndustryList = res.result.targetIndustryStr ? res.result.targetIndustryStr.split(',') : [];
if (res.result.annexFileMap) {
for (var i in res.result.annexFileMap) {
this.detailInfo.annexFile = i;
}
}
this.getCompanyInfoById(res.result.businessId);
} else {
this.$message.error(res.msg);
}
}).catch((err) => {
this.$message.error(err)
})
},
//根据id获取企业信息
getCompanyInfoById(data) {
api.getCompanyInfoById(data).then((res) => {
if (res.code == 0) {
this.companyInfo = res.result;
this.companyInfo.industryList = res.result.companyIndustryStr ? res.result.companyIndustryStr.split(",") : [];
this.companyInfo.companyLabelList = res.result.companyLabel ? res.result.companyLabel.split(",") : [];
} else {
this.$message.error(res.msg);
}
}).catch((err) => {
this.$message.error(err);
})
},
clickGeneratePicture() {
let _this = this;
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
setTimeout(function () {
// // 声明一个画布元素,存储需下载图片范围
let canvas = document.createElement("canvas");
// 获取需下载范围元素
let img = document.querySelector('.phoneWrapper');
// 图片高度
var w = parseInt(window.getComputedStyle(img).width);
// 图片宽度
var h = parseInt(window.getComputedStyle(img).height);
// 声明画布宽高
canvas.width = w;
canvas.height = h;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
// html2canvas(img, {
// canvas: canvas,
// useCORS: true,
// }).then(canvas => {
// canvas.toBlob((blob) => {
// console.log(blob)
// })
// console.log(canvas)
// // 转成图片，生成图片地址
// // document.body.appendChild(canvas.toDataURL("image/png"))
// // _this.imgUrl = canvas.toDataURL("image/jpg");
// });
// _this.photoShow = true;
// // 声明一个画布元素,存储需下载图片范围
// let canvas = document.createElement("canvas");
// // 获取需下载范围元素
// let img = document.querySelector('.phoneWrapper');
// // 图片高度
// var w = parseInt(window.getComputedStyle(img).width);
// // 图片宽度
// var h = parseInt(window.getComputedStyle(img).height);
// // 声明画布宽高
// canvas.width = w;
// canvas.height = h;
// canvas.style.width = w + "px";
// canvas.style.height = h + "px";
// console.log(w, h);
// let context = canvas.getContext("2d");
// context.scale(2, 2);
// 利用 html2canvas 下载 canvas
html2canvas(img, {
canvas: canvas,
backgroundColor: "#fff",
useCORS: true, // 允许图片跨域
taintTest: true, // 在渲染前测试图片
}).then(function(canvas) {
_this.imgUrl = canvas.toDataURL()
console.log(_this.imgUrl)
});
},0);
},
},
mounted() {
this.getRequireDetail();
}
}
</script>
<style scoped lang="scss">
</style>
\ No newline at end of file
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