VUE_vue使用html2canvas多张海报保存案例，保存图片，复制链接

喜欢ヅ旅行 2022-12-03 05:09 434阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]  
轮播是vant组件，需要先装van依赖包  
npm i vant -S //详情查看官方文档 [https://youzan.github.io/vant/\#/zh-CN/quickstart][https_youzan.github.io_vant_zh-CN_quickstart]  
npm install --save html2canvas //安装html2canvas依赖 官方文档 [http://html2canvas.hertzen.com/][http_html2canvas.hertzen.com]

<template>
        <div class="code_layout">
            <div id="html2canvasid" class="code" v-if="show == 1">
                <div class="swiper_">
                    <img class="bjimg" :src="bjshow" alt="" />
                    <div class="van-swipe-item_">
                        <div class="code_img" >
                            
                            <img src="@/assets/logo.png" alt="" />
                            <div class="code_txt">邀请码：123456</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="code" v-if="show == 0">
                <div class="swiper_">
                    <van-swipe class="my-swipe" autoplay="false" indicator-color="red" ref="swiper" @change="onChange">
                        <van-swipe-item v-for="item in bjimg" :key="item.id">
                            <img :src="item.img" alt="" />
                            <div class="van-swipe-item_">
                                <div class="code_img">
                                    
                                    <img src="@/assets/logo.png" alt="" />
                                    <div class="code_txt">邀请码：123456</div>
                                </div>
                            </div>
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="arrow">
                    <van-icon name="arrow-left" @click="changeSwipe('up')" />
                    <van-icon name="arrow" @click="changeSwipe('down')"/>
                </div>
            </div>
    
            <div class="code_btn">
                <div class="code_btn_1" @click="copyUrl">复制链接</div>
                <div class="code_btn_2" @click="download">点击图片保存</div>
            </div>        
            
            
        </div>
    </template>
    <script> import html2canvas from 'html2canvas'; import { Toast } from 'vant'; export default { data() { return { copydata:"默认复制文本", //分享链接 two_code_url:"", //二维码 toDataURL:'', //截图 bjimg:[ //背景图 { id:1, img: require('@/assets/1.jpg'), }, { id:2, img: require('@/assets/2.jpg') }, ], show:0, //截图与视图显示切换 bjshow:"", //需要截图的背景图片 swid:0, //轮播切换触发，0为第一张 } }, created(){ }, methods:{ //复制 copyUrl(){ let input = document.createElement("input"); input.setAttribute("type","text"); input.setAttribute("id","xw-copy-test"); input.setAttribute("value",this.copydata); input.style.width = "10px"; input.style.height = "0px"; input.style.position = "fixed"; input.style.display = "block"; input.style.border = "none"; input.style.top = "0px"; input.style.zIndex = "-10"; document.body.appendChild(input); let Url = document.getElementById("xw-copy-test"); Url.select(); document.execCommand("Copy"); document.activeElement.blur(); Toast("复制成功"); }, //保存图片 download(){ this.show =1 this.bjshow = this.bjimg[this.swid].img Toast.loading({ message: '加载中...', forbidClick: true, duration: 0.5, // 持续展示 toast }); setTimeout(()=> { html2canvas(document.querySelector("#html2canvasid"),{ backgroundColor: null, useCORS:true, allowTaint:false, logging:false, taintTest: false, }).then((canvas) => { let dataURL = canvas.toDataURL("image/png"); this.downImg=dataURL; this.toDataURL = dataURL var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { Toast("长按二维码保存"); setTimeout(() => { this.show =0 }, 500); return; } else { Toast.loading({ message: '加载中...', forbidClick: true, duration: 0.5, // 持续展示 toast }); setTimeout(()=>{ var a = document.createElement('a') a.download = 'xw-img' // 设置图片地址 a.href = this.toDataURL; a.click(); // document.getElementById("img").click() },500) Toast.loading({ message: '加载中...', forbidClick: true, duration: 0.5, // 持续展示 toast }); setTimeout(() => { this.show =0 }, 500); } }); },500) }, onChange(index) { window.scrollTo(0, 0); this.swid = index }, changeSwipe(type) { if(type == 'up') { this.swid -= 1; } else if (type == 'down') { this.swid += 1; } this.$refs.swiper.swipeTo(this.swid); }, }, components:{ } }; </script>
    <style scoped> .code_layout{ width: 100vw; height: 100vh; } .swiper_{ width: 100%; height: 100%; } .van-swipe{ width: 100%; height: 100%; } .my-swipe .van-swipe-item { color: #fff; width: 100%; height: 100%; text-align: center; background-color: #39a9ed; } .van-swipe-item img{ width: 100%; height: 100%; overflow: hidden; } .code{ width: 100%; height: 100vh; background-size:100% 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .van-swipe-item_{ width: 375px; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; margin-top: 150px; } .code_img{ width: 200px; height: 200px; display: block; text-align: center; } .code_img img{ margin: 0 auto; width: 106px; height: 106px; } .code_txt{ font-size:15px; color: #fff; text-align: center; } .bjimg{ width: 100%; height: 100%; } .arrow{ width: 100%; position: fixed; display: flex; justify-content: space-between; } .arrow .van-icon{ color: #fff; } .code_btn{ width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; font-size:15px; font-family:Microsoft YaHei; font-weight:400; color:rgba(255,255,255,1); background: #fff; position: fixed; bottom: 0; } .code_btn_1{ width:139px; height:42px; /* background:linear-gradient(94deg,rgba(252,38,89,1),rgba(255,202,215,1)); */ background:rgba(252,38,89,1); border-radius:21px 0px 0px 21px; line-height: 42px; text-align: center; } .code_btn_2{ width:139px; height:42px; /* background:linear-gradient(-84deg,rgba(255,177,66,1),rgba(255,201,126,1)); */ background: rgba(255,201,126,1); border-radius:0px 21px 21px 0px; line-height: 42px; text-align: center; } ::v-deep .van-swipe__indicators{ top: 600px } ::v-deep .van-swipe__indicator{ width: 10px; height: 10px; background-color:rgba(255,177,66,1) } </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4b72e64ed67042c1b25bb3dfdcb78f9c.png
[https_youzan.github.io_vant_zh-CN_quickstart]: https://youzan.github.io/vant/#/zh-CN/quickstart
[http_html2canvas.hertzen.com]: http://html2canvas.hertzen.com/