Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
The L-Painter plugin is typically used to generate poster art across the sides
An HTML structure
- Plug-ins provide
l-painter-view
,l-painter-text
,l-painter-image
,l-painter-qrcode
Four types of components - through
css
Property drawing style, consistent with the way style is used.
<l-painter >
<l-painter-view css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"></l-painter-view>
<l-painter-view css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;"></l-painter-view>
<l-painter-view css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"></l-painter-view>
</l-painter>
Copy the code
JSON schema construct
- There are four types of components in JSON
type
forview
,text
,image
,qrcode
- through
board
Set the JSON Schema data required for the poster to be drawn - All types of schemas are available
css
Field, CSS style attribute key values using hump names such as:lineHeight
data() {
return {
poster: {
views: [{css: {
background: "#07c160".height: "120rpx".width: "120rpx".display: "inline-block"
},
type: "view"
},
{
css: {
background: "#1989fa".height: "120rpx".width: "120rpx".borderTopRightRadius: "60rpx".borderBottomLeftRadius: "60rpx".display: "inline-block".margin: "0 30rpx"
},
views: [].type: "view"
},
{
css: {
background: "#ff9d00".height: "120rpx".width: "120rpx".borderRadius: "50%".display: "inline-block"
},
views: [].type: "view"},]}}}Copy the code
If the native applet painter. Js is also supported
- In the plug-in
painter.js
Used in native applets - New Painter comes after
source
JSON schema is passed in - Call again
render
Draw the posters - To generate images, check out the wechat applet canvasToTempFilePath of Cavnas
In my case, the poster structure is generated using HTML structure, generated after entering the page and set CSS left:100% hidden
<! - drawing board -- -- >
<view style="position: absolute; bottom:10%; left: 100%;">
<l-painter
css="width: 750rpx;"
isCanvasToTempFilePath
@success="handleSuccess($event)"
@fail="handleError($event)"
@progress="handleProgress($event)"
>
<l-painter-image
:src="painterPath"
css="width: 750rpx; height: 1100rpx; position: relative;"/>
<l-painter-view css="position: absolute; bottom:10%; left: 10%;">
<l-painter-image
:src="avatarUrl"
css="width: 84rpx; height: 84rpx; border-radius: 50%;"/>
<l-painter-view css="display:inline-block; vertical-align: middle; width: 400rpx; height: 84rpx; line-height:42rpx; padding-left: 20rpx;">
<l-painter-text :text="nickname" css="display: block; width: 100%; height: 42rpx; color: #fff; font-size: 30rpx; fontWeight: bold"/>
<l-painter-text text="Description" css="display: block; width: 100%; height: 42rpx;color: rgba(255,255,255,.7); font-size: 24rpx"/>
</l-painter-view>
</l-painter-view>
<l-painter-image
:src="codePath"
css="width: 150rpx; height: 150rpx; position: absolute; bottom:1%; right: 8%;"/>
</l-painter>
</view>
Copy the code
The following JS code, event monitoring error message, the small program to save the system picture to the user authorization prompt, the generated poster link to save download, but wechat background drop to save the downloaded picture of the domain name whitelist, otherwise the picture can not be displayed when saving the loading map, wechat profile name also need to be added.
export default {
data(){
return {
nickname:"".avatarUrl:"".codePath:"".// Small program code address
picture:"",}},methods: {
handleSuccess(path){
uni.hideLoading();
this.picture = path
},
handleProgress(number){
this.progressNum = number
},
handleError(error){ uni.hideLoading(); }},Copy the code
User authorization poster save system album prompt function
function saveImage() { // Long press to save
if(this.picture ! = =""){
uni.hideLoading();
uni.authorize({
scope:"scope.writePhotosAlbum".success:() = > {
uni.saveImageToPhotosAlbum({
filePath: this.picture,
success:() = >{
uni.showModal({
title:"Saved successfully".content:"The picture has been successfully saved to the album, go and share it with your circle.".showCancel:false}}})); },fail() {
uni.showModal({
title: 'Save failed'.content:"You cannot save to album without authorization.".showCancel:false})}})}else{
uni.showModal({
title:'tip'.content:"Failed to generate poster, please try again".showCancel:false,}}}),Copy the code