微信小程序利用canvas生成海报-------图片为网络图片

根据我们老总的业务需求，迫不得已，我做了这个canvas绘制的海报，感觉基本上可以解决现在海报所遇到的大部分问题了，献给那些没有做过的小伙伴们，话不多说，先上我做的效果

 

上代码

<style>

@font-face {font-family: "iconfont";

src: url('iconfont.eot?t=1557815862055'); /* IE9 */

src: url('iconfont.eot?t=1557815862055#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),

url('iconfont.woff?t=1557815862055') format('woff'),

url('iconfont.ttf?t=1557815862055') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

url('iconfont.svg?t=1557815862055#iconfont') format('svg'); /* iOS 4.1- */

}

 

.iconfont {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

 

.icon-shouye:before {

content: "\e61e";

}

 

.icon-dingdan:before {

content: "\e64e";

}

 

.icon-gouwuche:before {

content: "\e601";

}

 

.icon-guanbi:before {

content: "\e607";

}

 

.icon-dingdan1:before {

content: "\e64f";

}

 

.icon-guanbi1:before {

content: "\e61a";

}

 

.icon-next:before {

content: "\e61b";

}

 

.detail{

padding-bottom:100rpx;

font-family: "PingFangSC-Medium","PingFang SC","Microsoft YaHei","Helvetica","Tahoma","Arial","微软雅黑";

}

.detail .info{

flex: 1;

padding:50rpx 30rpx 0rpx 30rpx;

background-color:#fff;

margin-bottom: 20rpx;

}

.info-title,.info-price{

font-size:34rpx;

color: #333;

line-height: 44rpx;

text-align: justify;

}

.info-price{

margin:10rpx 0;

display: flex;

font-size:36rpx;

align-items: center;

}

.info-price .price{

flex: 1;

color: #c0293a;

margin-left:20rpx;

}

.info-price .now-price .price-style {

font-size:22rpx;

background:#ffbd0c;

border-radius:5rpx;

color:#000;

font-family:'PingFangSC Regular';

padding:0rpx 10rpx;

line-height:28rpx;

height:28rpx;

margin-left:10rpx;

}

.info-price .old-price{

font-size:24rpx;

color:#ccc;

text-decoration:line-through;

line-height: 40rpx;

font-weight: unset;

}

.info-addr{

font-size:24rpx;

color: #999999;

}

 

.weui-media-box{

padding:40rpx;

}

.weui-media-box__thumb{

border-radius: 50%;

width:80rpx;

height:80rpx;

margin-right:20rpx;

}

.weui-media-box__title.avator{

margin-bottom:6rpx;

font-weight:normal;

}

.weui-media-box__title{

font-size:28rpx;

margin-bottom:20rpx;

font-weight:bold;

}

.weui-media-box__desc{

font-size:28rpx;

line-height:1.4;

display: block;

}

 

.weui-media-box_text{

padding: 15rpx;

background-color: #fff;

margin-bottom: 20rpx;

}

 

.weui-media-box_text.rec{

padding-right:0;

}

 

.weui-media-box__desc .desc-img{

width:100%;

height:452rpx;

margin-top: 20rpx;

}

 

.recommend-list{

white-space: nowrap;

overflow-x: auto;

}

.recommend-list .rec-good{

display: inline-block;

width:240rpx;

margin-right:12rpx;

overflow: hidden;

}

.rec-img{

width:80%;

height:160rpx;

display: block;

margin: 40rpx auto;

}

.rec-title{

font-size:24rpx;

white-space: nowrap;

margin-top:20rpx;

}

.rec-info{

line-height:40rpx;

}

.rec-info .rec-price,.rec-info .rec-addr{

display: inline-block;

font-size:24rpx;

white-space: nowrap;

}

.rec-info .rec-price{

color: red;

margin-right:16rpx;

}

.rec-info .rec-addr{

padding-left:12rpx;

border-left:1px solid #999999;

color: #999999;

width:30%;

line-height:24rpx;

}

 

.detail-footer{

position: fixed;

left:0;

bottom:0;

overflow: hidden;

height:100rpx;

background-color:#FFFFFF;

}

.detail-footer .footer-left{

float: left;

line-height:32rpx;

padding-top:4rpx;

}

.detail-footer{

/*border-top:1px solid #d9d9d9;*/

width:100%;

}

.footer-right{

float: right;

display: inline-block;

}

.footer-right button{

background-color:red;

color:#fff;

text-align:center;

border:none;

font-size:28rpx;

border-radius:0;

width:200rpx;

height:100rpx;

line-height:100rpx;

display:inline-block;

font-size:28rpx;

}

.footer-right .go-cart{

background-color:#ffb03f

}

 

.detail-footer .footer-left .icon-info,

.info-price .icon-info{

padding:0 6rpx;

display:inline-block;

text-align:center;

}

.detail-footer .footer-left .icon-info image,

.info-price .icon-info image{

width:40rpx;

height:40rpx;

}

.detail-footer .footer-left .icon-info text,

.info-price .icon-info text{

font-size:24rpx;

display: block;

}

.info-price .icon-info text{

font-weight: normal;

}

.info-price .icon-info view{

width:40rpx;

height:40rpx;

}

.action-sheet{

display: block;

width:100%;

height:100%;

position: fixed;

transition:all .5s linear;

background-color: rgba(0,0,0,.6);

left:0;

bottom:-2000rpx;

}

.action-sheet-content{

position: absolute;

left:0;

bottom:0;

background-color: #fff;

width:100%;

}

.pop-good-head{

position: relative;

height: 162rpx;

border-bottom: 2rpx solid #ccc;

color:#c0293a;

}

.pop-good-img{

width:160rpx;

height:160rpx;

position: absolute;

top:-40rpx;

left: 33rpx;

}

.pop-good-price{

font-size: 30rpx;

line-height: 42rpx;

color: #c0293a;

height: 42rpx;

padding-top: 20rpx;

padding-left: 218rpx;

}

.pop-good-close{

position: absolute;

top: 30rpx;

right: 30rpx;

font-size: 32rpx;

line-height: 32rpx;

color: #D1D1D1;

}

.pop-good-content{

padding:20rpx;

}

.good-label{

font-size:24rpx;