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 providel-painter-view,l-painter-text,l-painter-image,l-painter-qrcodeFour types of components
  • throughcssProperty 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 JSONtypeforview,text,image,qrcode
  • throughboardSet the JSON Schema data required for the poster to be drawn
  • All types of schemas are availablecssField, 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-inpainter.jsUsed in native applets
  • New Painter comes aftersourceJSON schema is passed in
  • Call againrenderDraw 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

The last

Develop uniAPP develop wechat applets advantages remember to check wechat applets documentation where the update information and problem announcements are the most timely