vue两张图片合成一张（海报二维码合成工具）

公司要经常换海报，一个海报要不同的二维码，做一个工具解决一下。

效果图如下

二维码图片的位置和海报大小可以随意调整
直接放代码：

<template><div class="all-tool"><div :style="bgStyle" class="course-container" id="myImage"><div class="course"><img :style="bgStyle" :src="data:imageUrl" /></div><div :style="codeStyle" class="code"><img :style="ImgStyle" :src="data:imageUrl1" /></div></div><div class="madin-cha"><div>背景图操作</div><div class="item-user"><span>上传 ：</span><el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false":on-change="handleAvatarSuccess":auto-upload="false"><img v-if="imageUrl" class="avatar-uploader-icon" :src="data:imageUrl" alt="" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div><div class="item-user"><span>长 ：</span> <input v-model="widthBg" type="text" /> px</div><div class="item-user"><span>高 ：</span> <input v-model="heightBg" type="text" /> px</div><div>二维码操作</div><div class="item-user"><span>上传 ：</span><el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false":on-change="handleAvatarSuccess2":auto-upload="false"><img v-if="imageUrl1" class="avatar-uploader-icon" :src="data:imageUrl1" alt="" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div><div class="item-user"><span>长 ：</span><input v-model="widthImg" type="text" /> px</div><div class="item-user"><span>高 ：</span><input v-model="heightImg" type="text" /> px</div><div class="item-user"><span>距离底部：</span><input v-model="bottomImg" type="text" /> px</div><div class="item-user"><span>距离左边：</span><input v-model="leftP" type="text" /> %</div><div class="item-user"><span>回拉左边：</span><input v-model="leftImg" type="text" /> px</div><div class="btn-all" type="button" @click="save()">合成下载</div><a id="link"></a></div></div>
</template><script>
import html2canvas from "html2canvas";
export default {data() {return {widthBg: 300,heightBg: 500,widthImg: 80,heightImg: 80,bottomImg: 66,leftP: 50,leftImg: 40,imageUrl: "",imageUrl1: "",};},computed: {bgStyle() {return {width: `${this.widthBg}px`,height: `${this.heightBg}px`,};},codeStyle() {return {bottom: ` ${this.bottomImg}px`,left: `${this.leftP}%`,marginLeft: `-${this.leftImg}px`,};},ImgStyle() {return {width: `${this.widthImg}px`,height: `${this.heightImg}px`,};},},created() {},destroyed() {},methods: {save() {html2canvas(document.querySelector("#myImage")).then((canvas) => {var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //save as download without name and extension//window.location.href = image;var link = document.getElementById("link");link.setAttribute("download", "haibao.png");link.setAttribute("href",canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));link.click();});},handleAvatarSuccess(file, fileList) {console.log(file, fileList);this.imageUrl = URL.createObjectURL(file.raw);},handleAvatarSuccess2(file, fileList) {console.log(file, fileList);this.imageUrl1 = URL.createObjectURL(file.raw);},},
};
</script><style scoped>
.all-tool {display: flex;flex-wrap: wrap;width: 100%;justify-content: space-between;background: #fff;height: 1000px;padding: 30px;box-sizing: border-box;
}
.course-container {height: 500px;width: 300px;position: relative;
}
.course {z-index: 1;position: absolute;
}.code {z-index: 2;position: absolute;
}.madin-cha {width: 400px;height: 800px !important;overflow: hidden;
}
.item-user {padding: 10px 30px;display: flex;
}
.item-user span {display: inline-block;width: 80px;text-align: right;
}
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader .el-upload:hover {border-color: #409eff;
}
.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 178px;height: 178px;display: block;
}
.avatar-uploader-icon {width: 100px;height: 100px;line-height: 100px;border: 1px solid #ccc;
}
.btn-all {background: rgb(5, 199, 224);text-align: center;padding: 5px;border-radius: 10px;color: #ffff;margin-top: 30px;width: 120px;margin: 30px auto 0;
}
</style>

上面代码若有什么问题可以指出，大家相互学习进步。

vue两张图片合成一张（海报二维码合成工具）相关推荐

这张「二维码」火到了GitHub热榜第一：扫一扫，打破系统边界，文件秒传
十三发自凹非寺量子位报道 | 公众号 QbitAI 这张「二维码」,今天火到了GitHub热榜第一. 为什么这么火? 只要扫描这张二维码,通过Wi-Fi,文件就可以在电脑和手机之间互传--文件 ...
.NetCore生成海报+二维码（logo）
准备工作引入如下Nuget包依赖 Install-Package QRCoder 1.4.1 Install-Package SixLabors.ImageSharp 1.0.3 Install-P ...
小程序海报二维码生成插件
分享一个小程序海报二维码插件建议使用方式: 测试环境先改造封装成自己需要的类文件,再引入框架使用,生成图片参考截图金装下载地址海报生成源码下载
matlab两张图片合成一张_两张图片合成一幅画意作品的简单方法
在<教你制作一幅画意摄影作品>的文章中,介绍了Snapseed(指划修图)和ToolWiz Photos(理理相册)两个App中用手机或平板制作画意摄影作品的基本方法,现在再来进一步试试用 ...
微信小程序之实现两张图片合成一张并保存到相册
不喜欢看废话的小伙伴,可以直接看图片下面的文字和注意事项实现是没问题的. 应用场景: 项目中,每个用户都会生成自己专属的小程序码,当用户扫描这个小程序码的时候,默认这个用户就会成为你的好友,,嗯,举 ...
PHP 海报二维码合成
组合参数方法: /*** [user_qrcode 参数组合]* @param [type] $bgImg [背景图]* @param [type] $codeImg [二维码]* @param st ...
vue设置海报二维码任意移动+放大缩小
<template><div class="content" v-if="hasPriv">< ...
js将两个图片保存下载（二维码保存为例）
1.两个图片保存的原理要将两个图片保存下载,要使用h5的canvas来实现,不需要引用任何插件就可以实现.这里使用canvas的drawImage函数,利用这个函数可以将两个图片都放入画布中,然后调 ...
Vue 移动端实现调用相机扫描二维码或条形码
一.开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见概述 | 微信开放文档),或者支付宝 H5 开放的API(详见?支付宝H5开放文档). 但是 ...

vue两张图片合成一张（海报二维码合成工具）

效果图如下

vue两张图片合成一张（海报二维码合成工具）相关推荐

最新文章

热门文章