uni-app H5端 uni.canvasToTempFilePath 得到的临时路径 显示不全

首先 你没有指定canvas的宽高，其次你没有将图片的宽对应canvas的宽， 你绘制了图片的实际宽高， 事实上你绘制的已经超出了canvas的范围， 所以最终生成图片 只有canvas内的那一块

其他端是否正常？
另外你贴一个图，不如上传一个示例

<template>  
    <view>  
        <!-- <canvas canvas-id="poster_share"></canvas> :style="{'width':bgImgW,'height':bgImgH}"-->  
        <!-- v-if="!posterURL" -->   
        <view  id="poster_Bg" class="poster_Bg">  
            <image class="back_image" :show-menu-by-longpress="longPress" :src="posterURL" mode="aspectFill" alt="邀请海报"></image>  
            <view style='width:0px;height:0px;overflow:hidden;'>  
                <image id="poster" class="poster"  
                    :class="[type === '0'? 'code_image1':'',type === '1'? 'code_image2':'',type === '2'? 'code_image3':'']"  
                    :show-menu-by-longpress="longPress"   
                    :src="code"  
                    style="visibility:hidden;">  
                </image>  
                <canvas canvas-id="poster_share" ></canvas>  
            </view>  
        </view>  
        <view v-if="!posterURL" id="poster_Bg" class="poster_Bg">  
            <view v-if="type === '0'" class="wrapper">  
                <image class="back_image bg_fitst" :src="image1"></image>  
                <image id="poster" class="poster code_image1" :show-menu-by-longpress="longPress" :src="code"></image>  
            </view>  
            <view v-if="type === '1'" class="wrapper">  
                <image class="back_image bg_second" :src="image2"></image>  
                <image id="poster" class="poster code_image2" :show-menu-by-longpress="longPress" :src="code"></image>  
            </view>  
            <view v-if="type === '2'" class="wrapper">  
                <image class="back_image bg_third" :src="image3"></image>  
                <image id="poster" class="poster code_image3" :show-menu-by-longpress="longPress" :src="code"></image>  
            </view>  
        </view>  
        <loading ref="loading" :custom="false" :shadeClick="true" :type="1"></loading>  
    </view>  
</template>  
<script>  
import loading from '@/components/xuan-loading/xuan-loading.vue';  
import storageService from '@/providers/essential/storageService.js';  
import Util from '@/common/util.js';  
export default {  
    components: {  
        loading  
    },  
    data() {  
        return {  
            longPress: true,  
            work_no: '',  
            name: '',  
            channel: '',  
            type: '',  
            code: '',  
            image: '',  
            twoButton: false,  
            image1:'',  
            image2: '',  
            image3: '',  
            bgImgW:'',  
            bgImgH:'',  
            codeImg_w:'',  
            codeImg_h:'',  
            codeImg_disX:'',  
            codeImg_disY:'',  
            posterURL:''  
        };  
    },  
    onLoad: function(option) {  
        // let app_info = storageService.getStorageSync('app_info');  
        // 小程序获取要跳转页面页面URL中携带的Params参数  
        if (option) {  
            console.log(option);  
            this.name = option.name;  
            this.work_no = option.work_no;  
            this.channel = option.channel;  
            this.type = option.type;  
            // storageService.removeStorageSync('code_info');  
        }  
    },  
    mounted: function() {  
        this.image1 = this.$API.localImgUrl + this.$API.image1  
        this.image2 = this.$API.localImgUrl + this.$API.image2  
        this.image3 = this.$API.localImgUrl + this.$API.image3  
        // this.createQrCode()  
        this.drawImage()  
    },  
    methods: {  
        createQrCode: function(){  
            let param_info = 'psechannel=' + this.channel + '&pseempid=' + this.work_no;  
            let url_data = this.$REQUEST_HREF_URL;  
            let params = {  
                encip_flag: 'N',  
                param_info: param_info,  
                url_data: url_data  
            };  
            let that = this;  
            this.$UNIHTTP.requerstHttp(this, this.$REQUEST_SERVER_URL + this.$API.gen, params, function success(res) {  
                if (res) {  
                    console.log(res.qr_code);  
                    that.code = 'data:image/png;base64,' + res.qr_code  
                    let code_info = that.code  
                    storageService.setStorageSync('code_info',code_info)  
                }  
            });  
        },  
        // uniapp可通过此方法对本地路径  很大几率真机没效果  
        urlTobase64: function(url) {  
            var toBase64Url;  
            uni.request({  
            url: url,  
            method: 'GET',  
            responseType: 'arraybuffer',  
            success: async res => {  
                    let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64  
                    toBase64Url = 'data:image/png;base64,' + base64; //不加上这串字符，在页面无法显示  
                    // console.log(toBase64Url)  
                }  
            });  
        },  
        drawImage: function() {  
            let that= this;  
            let systemInfo = uni.getSystemInfoSync();  
            that.bgImgW = systemInfo.windowWidth;  
            that.bgImgH = systemInfo.windowHeight;  
            let ctx = uni.createCanvasContext('poster_share',that);  
            console.log(systemInfo)  
            // 获取对应的背景图片that  
            let promise1 = new Promise(function(resolve,reject){  
                console.log(that.type)  
                let bgSrc  
                if(that.type === '0' ){  
                    bgSrc = that.image1;  
                } else if (that.type === '1' ){  
                    bgSrc = that.image2;  
                } else if (that.type === '2' ){  
                    bgSrc = that.image3;  
                }  
                console.log(bgSrc)  
                uni.getImageInfo({  
                    src: bgSrc,  
                    success:function(res){  
                       resolve(res);  
                    },  
                    fail:function(err){  
                        reject(err);  
                    }  
                })  
             })  
             //获取对应的二维码  
             let promise2 = new Promise(function(resolve,reject){  
                 let code_info = storageService.getStorageSync('code_info')  
                 if(!code_info){  
                    that.createQrCode()  
                 }  
                 let codeSrc = code_info;  
                uni.getImageInfo({  
                    src: codeSrc,  
                    success:function(res){  
                       resolve(res);  
                    },  
                    fail:function(err){  
                        reject(err);  
                    }  
               })  
            })  
            //成功得到图片信息后，开始绘图  
            Promise.all([promise1,promise2])                          
            .then(res=>{  
                console.log(res)  
                let bgSrc = res[0].path  
                let codeSrc = res[1].path  
                uni.downloadFile({    //网络图片需要先下载到本地  
                    url:bgSrc,  
                    success(res) {  
                        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容  
                        if (res.statusCode === 200) {  
                            console.log(res)  
                            ctx.drawImage(res.tempFilePath, 0, 0, that.bgImgW, that.bgImgH);  
                            uni.downloadFile({    //下载第二张网络图片  
                                url:codeSrc,  
                                success(res){  
                                    if (res.statusCode === 200) {  
                                        console.log(res)  
                                        let poster = uni.createSelectorQuery().in(that).select('#poster');  
                                        poster.boundingClientRect((res)=>{  
                                            console.log(res)  
                                            that.codeImg_w = res.width;  
                                            that.codeImg_h = res.height;  
                                            that.codeImg_disX = res.left;  
                                            that.codeImg_disY = res.bottom;  
                                        }).exec()  
                                        ctx.drawImage(res.tempFilePath,that.codeImg_disX,that.codeImg_disY,that.codeImg_w,that.scodeImg_h)  
                                        ctx.draw(true,setTimeout(function(){  
                                            uni.canvasToTempFilePath({  
                                                x:0,  
                                                y:0,  
                                                width:that.bgImgW,  
                                                height:that.bgImgH,  
                                                canvasId:'poster_share',  
                                                fileType:'jpg' ,  
                                                success:function(res){  
                                                    console.log(res);   
                                                    that.posterURL = res.tempFilePath  
                                                    uni.hideLoading()  
                                                    // that.saveToAlbum()  //保存到相册  
                                                    // const savedFilePath = res.tempFilePath //相对路径  
                                                    // const path = plus.io.convertLocalFileSystemURL(savedFilePath) //绝对路径  
                                                    // const fileReader = new plus.io.FileReader()  
                                                    // fileReader.readAsDataURL(path)  
                                                    // fileReader.onloadend = (res) => { //读取文件成功完成的回调函数  
                                                    //  console.log(res.target.result) //输出base64内容  
                                                    //  that.posterURL = res.target.result; //该路径为生成海报图片的临时路径   
                                                    //  uni.hideLoading()  
                                                    //  that.saveToAlbum()  //保存到相册  
                                                    // }  
                                                },  
                                                fail:function(res){  
                                                    console.log(res)  
                                                }  
                                                },this)  
                                            },5000))  
                                        }  
                                    }  
                                })  
                             }  
                        }  
                    })    
            }).catch(function(error) {  
                console.log(error)  
            })   
        },  
        close: function() {  
            this.$refs.loading.close();  
        },  
        open: function() {  
            this.$refs.loading.open();  
        }  
    }  
};  
</script>

同上，是有时候不稳定。

是的，有什么好的优化说下