-
大家好,做前端一年多了最近跳槽到一家做电商公司,碰到问题大多都是之前公司从来没有遇到的过的T_T,好啦,大家还是看代码吧 .
-
在做app时候有一个功能需要长按保存,大家都知道这个功能浏览器是可以自己实现的,但是如果是app的话,就不得不自己写了。
1.css
这里提醒一下大家,因为我是用vue框架开发运行时要把css分开来写
在这里插入代码片
.hs{
transition all .3s linear;
position fixed;
left 0;
right 0;
bottom -101px
height 85px;
background #f4f5f6;
>ul{
display flex;
flex-direction column;
li{
width 100%;
box-sizing border-box;
padding 14px 0;
text-align center;
background #fff;
font-size 14px;
display: flex;
justify-content center;
a{
color #000;
}
}
}
}
.button-shows{
bottom 0;
z-index 1000;
}
html
<div class="hs" :class="{'button-shows': isDeleting}">
<ul>
<li class="m_b_1" @click="backbtn">保存图片</li>
<li class="backOff" @click="backOff">返回</li>
</ul>
</div>
script
在这里插入代码片
/
/长按保存
showDeleteButton() {
clearInterval(this.Loop);//再次清空定时器,防止重复注册定时器
this.Loop=setTimeout(()=>{
this.isDeleting = true;
},1000);
},
clearLoop() {
clearInterval(this.Loop);
},
//图片保存到本地
downloadIamge(imgsrc, name) {
var image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.src = imgsrc;
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png");
console.log(url);
//得到图片的base64编码数据
var a = document.createElement("a");
// 生成一个a元素
var event = new MouseEvent("click");
// 创建一个单击事件
a.href =url;
a.download = name || "photo";
// 设置图片名称 a.href = url; // 将生成的URL设置为a.href属性
console.log(a.download);
a.dispatchEvent(event);
console.log( a.dispatchEvent(event));
// 触发a的单击事件
};
console.log( image.src)
},
//取消
backbtn(){
this.downloadIamge(this.backURL, 'pic');
console.log(this.backURL);
//'http://192.168.1.226:8080/resources/style/system/manage/blue/images/logo.png'
},