애플릿에서 그림을 생성하고 저장(painter로 그림을 생성)

16858 단어 애플릿
image.js
export default class LastMayday {
    palette(bg,articleTitleUrl,code,logo,title,content) {

        return ({
            width: '650rpx',
            height: '1000rpx',
            background: bg,//"./../../lib/image/bz_bg.png",//bg
            views: [
                {
                    type: 'text',
                    text:content,// '                                ',
                    css: {
                        fontSize: '36rpx',
                        top: `${520}rpx`,
                        left: `${50}rpx`,
                        color:'#fff',
                        width: '550rpx',
                        maxLines: 1,
                    }
                },
                {
                    type: 'text',
                    text: title,//'                                                                              ',
                    css: {
                        fontSize: '26rpx',
                        top: `${600}rpx`,
                        left: `${50}rpx`,
                        color:'#fff',
                        width: '550rpx',
                        maxLines:5,
                        lineHeight:'45rpx'
                    }
                },
                {
                    type: 'text',
                    text: '            ',
                    css: {
                        fontSize: '26rpx',
                        bottom: `${30}rpx`,
                        right: `${200}rpx`,
                        color:'#ccc',
                        width: '160rpx',
                        maxLines:2,
                        lineHeight:'45rpx'
                    }
                },
                {
                    type: 'image',
                    url: code,//"./../../lib/image/mini.jpg",//code
                    css: {
                        bottom: `${20}rpx`,
                        right: `${50}rpx`,
                        width: '120rpx',
                        height: '120rpx',

                    },
                },
                {
                    type: 'image',
                    url: logo,//"./../../lib/image/miniAppLogImg.png",
                    css: {
                        bottom: `${20}rpx`,
                        left: `${50}rpx`,
                        width: '120rpx',
                        height: '120rpx',
                        borderRadius: '20rpx'
                    },
                },
                {
                    type: 'image',
                    url:articleTitleUrl,//"./../../lib/image/cover.jpg",
                    css: {
                        top: `${90}rpx`,
                        left: `${50}rpx`,
                        mode: 'scaleToFill',
                        width: '550rpx',
                        height: '400rpx',
                        borderWidth:'5rpx',
                        borderColor:'#fff'
                        /*rotate: rotate,*/
                        // borderRadius: borderRadius,
                    },
                }
                ],
        });
    }
}



wxml
 <view class="container">
    <painter customStyle='margin-left:50rpx;' palette="{{template}}" bind:imgOK="onImgOK" />
    <view class="operate">
        <button open-type="openSetting" bindopensetting="callback" class="button" wx:if="{{hasPower  == false && hasAuth == true}}">          button>
        <button   bind:tap="eventSave" wx:if="{{hasPower == true||hasAuth == false}}" class="button">          button>
    view>
view>
import Card from './image';
import Http from './../../http/http'
import HttpConfig from  './../../http/httpConfig'
import Util from "../../utils/util";
const app = getApp();

Page({

    /**
     *        
     */
    data: {
        articleTitle:'',
        articleShareDes:'',
        hasPower:false,
        hasAuth:false,
        bgPic:HttpConfig.imgUrl +'/img/bz_bg.png',
        template:{},
        shareImage:'',
    },
    onLoad: function (options) {
        console.log(options);
        this.data.articleTitle = options.articleTitle;
        this.data.articleShareDes = options.articleShareDes;
        this.data.articleTitleUrl = options.articleTitleUrl.replace("http",'https');
    },
    onShow: function () {

        wx.getSetting({
            success: (res) => {
                console.log(res.authSetting['scope.writePhotosAlbum'] === undefined)
                if(res.authSetting['scope.writePhotosAlbum'] === undefined){
                    this.setData({
                        hasAuth:false
                    })
                }else {
                    this.setData({
                        hasAuth:true
                    })
                    if(res.authSetting['scope.writePhotosAlbum']){
                        this.setData({
                            hasPower:true
                        })
                    }else{
                        this.setData({
                            hasPower:false
                        })
                    }
                    console.log(this.data.hasPower)
                }
            }
        })
    },
    onImgOK(e) {
        this.setData({
            shareImage:e.detail.path
        })
    },


    /**
     *       --          
     */
    onReady: function () {

        let params = app.globalData.options;
        this.getMiniAppCode(params.a, params.p, params.l);
        //this.setData({template: new Card().palette()});

    },
    //       
    getMiniAppCode:function (employeeArticleId,pid,level) {
        Http.ajax({
            url:'/miniwx/getMiniAppCode.shtml',
            data:{
                employeeArticleId:employeeArticleId,
                pid:pid,
                level:level
            },
            success: (data) =>{
                this.setData({
                    miniCdoe:data.replace("http",'https')
                });

                this.getMiniAppInfo();

            }
        })
    },
    //        logo
    getMiniAppInfo:function () {
        Http.ajax({
            url: '/miniwx/getMiniAppInfo.shtml',
            success: (data) => {
                this.setData({
                    miniAppImg: data.miniAppImg.replace("http",'https')
                });
                console.log(this.data)
                this.setData({
                    template: new Card().palette(this.data.bgPic,this.data.articleTitleUrl,this.data.miniCdoe,this.data.miniAppImg,this.data.articleShareDes,this.data.articleTitle),
                });
            }
        })
    },
    eventSave() {
        let that = this;
        wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
                //                ,     wx.startRecord         
                console.log(that.data.hasPower)
                let imgSrc = that.data.shareImage;
                wx.saveImageToPhotosAlbum({
                    filePath: imgSrc,
                    success: function (res) {
                        Util.toaster("    ");
                    },
                    fail:function () {
                        Util.toaster("    ",()=>{
                            wx.navigateBack();
                        });

                    }
                })
            }
        })

    },
});
![      ](https://img-blog.csdn.net/20180822101719494?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTY4NDgz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

좋은 웹페이지 즐겨찾기