手气好,抽到宝,你不来试试吗?
我刚刚抽到了:
// cdn图片有问题需要换成本地的图片手气好,抽到宝,你不来试试吗?我刚刚抽到了:小米音乐音响长按识别 试试运气来自UU跑腿抽奖保存图片import html2canvas from 'html2canvas';export default {data () {return {};...
// cdn图片有问题 需要换成本地的图片
手气好,抽到宝,你不来试试吗?
我刚刚抽到了:
来自UU跑腿抽奖
保存图片
import html2canvas from 'html2canvas';
export default {
data () {
return {
};
},
mounted(){
},
methods: {
savecanvas(){
let canvas = document.querySelector('.canvas');
let that = this;
html2canvas(canvas,{scale:2,logging:false,useCORS:true}).then(function(canvas) {
let type = 'png';
let imgData = canvas.toDataURL(type);
// 照片格式处理
let _fixType = function(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
let r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
imgData = imgData.replace(_fixType(type),'image/octet-stream');
let filename = "UUSound" + '.' + type;
that.saveFile(imgData,filename);
});
},
saveFile(data, filename){
let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
let event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}
}
}
.index{
height: 100%;
width: 100%;
.canvas{
height: 100%;
height: 100%;
background: #d5574a;
padding: 0.5067rem 0.6rem 0;
box-sizing: border-box;
.avatar{
height: 1.0667rem;
width: 1.0667rem;
margin: 0 auto;
img{
height: 1.0667rem;
width: 1.0667rem;
border-radius: 50%;
}
}
.text{
font-size: 0.4267rem;
color: #ffffff;
margin-top: 0.36rem;
text-align: center;
p:last-child{
margin-top: 0.2667rem;
}
}
.box{
margin-top: 0.5333rem;
width: 100%;
background: #ffffff;
border-radius: 8px;
padding: 0 0.3067rem 0.9333rem;
box-sizing: border-box;
.title{
font-size: 0.5067rem;
color: #ff8b03;
padding: 0.76rem 0 0.5067rem;
text-align: center;
}
.sound{
width: 100%;
border:2px solid #ff8b03;
box-sizing: border-box;
img{
width: 100%;
}
}
.qrcode{
width: 2.4rem;
height: 2.4rem;
margin: 0.88rem auto 0;
img{
width: 100%;
}
}
.tip{
font-size: 0.3733rem;
color: #8f8f8f;
text-align: center;
margin: 0.3733rem 0 0 0;
}
}
.from{
text-align: center;
font-size: 0.3067rem;
color: #E6a7a2;
margin-top: 0.8667rem;
}
}
.save_btn{
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 1.44rem;
background: #333333;
line-height: 1.44rem;
text-align: center;
color: #ffffff;
font-size: 0.3733rem;
}
}
更多推荐
所有评论(0)