|
|
@@ -69,7 +69,7 @@
|
|
|
</transition>
|
|
|
</div>
|
|
|
<transition name="fade">
|
|
|
- <div class="model" v-show="showImg !== undefined" @click="close">
|
|
|
+ <div class="model" v-show="showImg !== undefined">
|
|
|
<van-icon
|
|
|
color="#fff"
|
|
|
size="26"
|
|
|
@@ -77,7 +77,10 @@
|
|
|
class="close"
|
|
|
@click="close"
|
|
|
/>
|
|
|
- <img :src="showImg" class="modelImg" alt="" />
|
|
|
+ <div class="modelImg">
|
|
|
+ <img :src="showImg" style="width: 100%; height: 100%" />
|
|
|
+ <p>请长按保存图片</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
@@ -148,6 +151,34 @@ function autoStep() {
|
|
|
|
|
|
function showDown() {
|
|
|
showImg.value = url.bg;
|
|
|
+ // const image = new Image();
|
|
|
+ // image.setAttribute("crossOrigin", "anonymous"); //设置允许跨域
|
|
|
+ // image.src = url.bg;
|
|
|
+ // image.onload = function () {
|
|
|
+ // //等待图片加载完成创建canvas
|
|
|
+ // let canvas = document.createElement("canvas");
|
|
|
+ // //将图片绘制到canvas画布上
|
|
|
+ // canvas.width = image.width;
|
|
|
+ // canvas.height = image.height;
|
|
|
+ // let ctx = canvas.getContext("2d");
|
|
|
+ // ctx.drawImage(image, 0, 0, image.width, image.height);
|
|
|
+ // //获取图片文件格式 jpg/jpeg/png
|
|
|
+ // let ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
|
|
|
+ // //导出画布快照 此时已越过跨域限制成功取到图片数据
|
|
|
+ // let dataURL = canvas.toDataURL("image/" + ext);
|
|
|
+ // //创建a标签
|
|
|
+ // const a = document.createElement("a");
|
|
|
+ // // 赋值a标签download属性值，标明该a标签提供下载功能，同时该属性指定了下载时的文件名称
|
|
|
+ // a.download = "test";
|
|
|
+ // //赋值a标签下载地址，即canvas导出的画布快照 base64格式的图片地址
|
|
|
+ // a.href = dataURL;
|
|
|
+ // //添加a标签到dom中
|
|
|
+ // document.body.appendChild(a);
|
|
|
+ // //触发a标签点击事件 触发下载
|
|
|
+ // a.click();
|
|
|
+ // //下载完成 删除多余的a标签 保持页面原有元素不动
|
|
|
+ // document.removeChild(a);
|
|
|
+ // };
|
|
|
}
|
|
|
function close() {
|
|
|
showImg.value = undefined;
|
|
|
@@ -273,6 +304,9 @@ function close() {
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
width: 80%;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
}
|
|
|
.close {
|
|
|
position: absolute;
|
liyongli