实现海报合成工具，自定义背景图、位置、大小等（html2canvas）

<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-upload class="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-upload class="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="saveImage">合成下载</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: {saveImage() {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", "海报.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;cursor: pointer;
}
</style>

实现海报合成工具，自定义背景图、位置、大小等（html2canvas）相关推荐

css之背景图固定大小不变、不重复、充满整个页面
一. 想要css背景图固定大小不变,在对应属性加上一下代码就可以了: background-size: cover;//注意:一定要把这个属性配合fixed使用:background-repeat: ...
小程序canvas生成海报字体在背景图下方
小程序canvas生成海报字体在背景图下方图片是异步加载可以放在回调里设置字体也可以延迟放置如果还有更好的方法可以留言
[css] 自定义背景图拼接
将背景切片为head.body.foot三个png /*背景图片*/background: url(~@/assets/head.png) no-repeat centertop/100% 73px, ...
IDEA设置自定义背景图
IDEA是支持自定义背景图片的,今天在这里给大家分享一个超级简单的方法第一步,打开idea的settings- ,在输入框搜索Set Background Image 第二步,右键Set Backg ...
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式，多用于异形弹窗背景图
如果阁下想玩进阶版的背景图样式请移步[进阶版九宫格背景图片]如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果,并自适应任何宽高效果?_你挚爱的强哥❤给你发来1条消息❤-CSDN博 ...
IDEA自定义背景图
说明:也是没有段子的一天-圣诞节要到了-给自己的IDEA换个好看的背景图吧- IDEA中点击左上角Settings,找到Plugins,搜索插件BackGroundImage.安装一下,重启IDEA. ...
高德地图自定义背景图+自定义文字，marker自定义
mounted() {this.addMarker()}, //实例化marker addMarker() {let me = this;var position = new AMap.LngLat( ...
Vue - 实现信纸输入写作，类似写明信片时的一张背景图片 + 横格纸效果（信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色，一切由您 DIY 自定义样式）纯CSS完成支持任何vue项目
前言网上没有这方面的组件和插件,本文来做优质的组件(附带详细的使用方法及源码注释),无任何第三方插件依赖. 本文实现了在 Vue / Nuxt 项目中,实现 "横格纸" 一样的 ...
Android自定义对话框(Dialog)位置,大小
代码: package angel.devil; import android.app.Activity;import android.app.Dialog;import android.os.Bun ...

实现海报合成工具，自定义背景图、位置、大小等（html2canvas）

实现海报合成工具，自定义背景图、位置、大小等（html2canvas）相关推荐

最新文章

热门文章

实现海报合成工具，自定义背景图、位置、大小等 （html2canvas）

实现海报合成工具，自定义背景图、位置、大小等 （html2canvas）相关推荐

最新文章

热门文章

实现海报合成工具，自定义背景图、位置、大小等（html2canvas）

实现海报合成工具，自定义背景图、位置、大小等（html2canvas）相关推荐