1.0.1 • Published 3 years ago
poster-synthesis v1.0.1
Public Component
下载依赖:
npm i poster-synthesis --save
##HTML
<div
class="canvas-contaienr"
id="canvasContaienr"
>
<!-- 部分手机下面,比如小米,SAMSUNG的noteII系列 只能设置行内 crossorigin="Anonymous" 才能不污染画布 -->
<img
crossorigin="Anonymous"
src="https://static.xiongmaoboshi.com/cms_media/8170ae31893248f5aa413249d4e56d96.png"
id="selectImgId"
class="img"
style="transform: translateX(0px) translateY(0px) scale(1)"
/>
<div id="imgListContainer">
<img
crossorigin="Anonymous"
src="https://business.xiongmaoboshi.com/dpshop/res/img/Pop01-2-1610333672775-322.png"
class="poster_img poster_img_default"
/>
<img
crossorigin="Anonymous"
src="https://user-gold-cdn.xitu.io/2019/12/3/16ecad05e04bdf0e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1"
class="poster_img qrcode"
style="right: 25px; bottom: 54px"
/>
</div>
<div id="textListContainer">
<span class="poster_text text-span"
style="font-size: 12px;
line-height: 18px;
font-family: STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑';"
>
mmm4日,@张继科 立春发表新诗,被网友发现诗中暗藏“景甜”二字,随后@景甜 留言:
</span>
<span class="poster_text text-span"
style="font-size: 12px;
line-height: 18px;
color: rgba(255,0,0,1);
bottom: 98px;
font-family: STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑';"
>
景甜 留言:
</span>
</div>
</div>
##style
.canvas-contaienr {
width: 100%;
height: 558px;
margin: 0 auto;
margin-bottom: 25px;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-size: 100% 100%;
box-shadow: 0px 10px 17px 0px rgba(1, 169, 199, 0.26);
}
.canvas-contaienr img {
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
/*禁止长按保存*/
pointer-events: none;
}
.canvas-contaienr .img {
max-width: 100%;
height: auto;
z-index: -1;
}
.canvas-contaienr .poster_img_default {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.canvas-contaienr .poster_img {
position: absolute;
}
.canvas-contaienr .qrcode {
width: 85px;
height: 85px;
}
.canvas-contaienr .poster_text {
position: absolute;
}
.canvas-contaienr .text-span {
left: 40px;
bottom: 46px;
width: 200px;
}
##javaScript
/**
poster 是海报合成插件
selectFile 是一个用js 实现的图片选择器
*/
import { Poster, selectFile } from 'poster-synthesis';
var getSelectImgId = document.getElementById("selectImgId");
var imgListContainer = document.getElementById("imgListContainer");
var textListContainer = document.getElementById("textListContainer");
var contaienr = document.getElementById("canvasContaienr");
var synthesis = new Poster({
selectImgId: getSelectImgId,
imgListContainer,
textListContainer,
contaienr,
// 是否生成高清图(同时也会加大图片大小)
HD: true,
// 最小缩放比例(最小0.1)默认0.4
minScale: 0.4,
// 最大缩放比例默认3
maxScale: 3,
});
// poster api
// 生成自定义海报。
synthesis.startDrawing((src) => {
console.log(src);
});
// 更改前景图
synthesis.setBackgroundTemplate(
"https://business.xiongmaoboshi.com/dpshop/res/img/Pop02-2-1610333691008-736.png"
);
// 重新选择合成图片
selectFile(function (src) {
synthesis.resetSelectImg(src);
});