vue 实现html转图片和生成二维码

vue实现html转图片

下载html2canvas

yarn add html2canvas

app.vue

<!--* @Description: * @Version: 1.0* @Autor: solid* @Date: -06-08 18:16:20* @LastEditors: solid* @LastEditTime: -07-26 16:05:49--><template><div id="app"><div><h1>原始HTML</h1><div id="imageWrapper"><div class="container"><h1>Please Login</h1><form><div class="form-control"><inputtype="text"requiredplaceholder="Please enter username"v-model="user.username"/></div><div class="form-control"><inputtype="password"requiredplaceholder="Please enter password"v-model="user.password"/></div><button class="btn">Login</button><p class="text">Don't have an account? <a href="#">Register</a></p></form></div></div></div><div style="margin: 0 20px"><h1>生成的图片</h1><img :src="testUrl" alt="" /></div></div></template><script>import html2canvas from "html2canvas";export default {data() {return {user: {username: "admin", password: "password" },testUrl: "",};},mounted() {this.genImges();},methods: {genImges() {const options = {backgroundColor: "rgba(0, 0, 0, 0.4)", // null或transparent可将canvas背景设置为透明};html2canvas(document.getElementById("imageWrapper"),options).then((canvas) => {let dataURL = canvas.toDataURL("image/png");this.testUrl = dataURL;}).catch((err) => {console.log(err);});},},};</script><style>* {box-sizing: border-box;}#app {display: flex;}body {background-color: steelblue;color: #fff;font-family: "Muli", sans-serif;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;}.container {background-color: rgba(0, 0, 0, 0.4);padding: 20px 40px;border-radius: 5px;}.container h1 {text-align: center;margin-bottom: 30px;}.container a {text-decoration: none;color: lightblue;}.btn {cursor: pointer;display: inline-block;width: 100%;background: lightblue;padding: 15px;font-family: inherit;font-size: 16px;border: 0;border-radius: 5px;}.btn:focus {outline: 0;}.btn:active {transform: scale(0.98);}.text {margin-top: 30px;}.form-control {position: relative;margin: 20px 0 40px;width: 300px;}.form-control input {background-color: transparent;border: 0;border-bottom: 2px #fff solid;display: block;width: 100%;padding: 15px 0;font-size: 18px;color: #fff;}.form-control input:focus,.form-control input:valid {outline: 0;border-bottom-color: lightblue;}.form-control label {position: absolute;top: 15px;left: 0;pointer-events: none;}.form-control label span {display: inline-block;font-size: 18px;min-width: 5px;transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}</style>

vue生成二维码

下载vue-qr

yarn add vue-qr

App.vue

<!--* @Description: * @Version: 1.0* @Autor: solid* @Date: -06-08 18:16:20* @LastEditors: solid* @LastEditTime: -07-26 16:12:14--><template><div id="app"><div><vue-qr:logoSrc="logo"text="/a1309525802":size="120"></vue-qr></div></div></template><script>import vueQr from "vue-qr";export default {components: {vueQr,},data() {return {logo: require("@/assets/logo.png"),};},};</script><style scoped>#app {width: 100%;height: 100vh;display: flex;justify-content: center;align-content: center;}</style>