微信小程序导航背景图片是放本地还是远程

微信小程序导航背景图片是放本地还是远程,第1张

放本地

程序-----背景的路径设置

问题根源:在小程序内view的背景不能直接使用本地,否则设备加载不出。

解决方案:

一:将本地转换为base64格式,在线即可转换。

background: url(base64转换的代码);

二:将本地改变为网络路径,或者直接使用网络。

三:动态赋值---给view标签增加样式style="background-image:url('{{ bg }}');",其中bg就是js文件中的data中的字段值。

要知道原的长宽

要知道canvas的长宽

算出比例。先要判断原的宽度是不是大于高度,如果宽度大于高度,那么计算比例是canvas的宽度 / 原宽度 = 比例,假设原图宽度770,高度590,canvas是宽度600,高度300,那么比例就是 600 / 770 = 07792207792207793,用原的宽度乘以这个比例得出来就是600,770  07792207792207793 = 600,然后乘以高度 590  07792207792207793 = 4597402597402598。如果高度比宽度的值大就把canvas的高度 / 原高度,最后用得出来的比例计算canvas高度和宽度。

用drawImage写入到canvas上。

微信小程序开发时开发工具自带的模拟器可以正常显示,但是手机上面体验版查看居然没有,

经过查阅资料发现如下文档导致不显示:

1本地是用image加载的:src="///images/ic_headerjpg"  这样不能显示,应改为:>

选择: >

Page({

    data: {

        imgI:0

    }

})

loadImg(){

        let that=this,image=thatdatalistimg,i=thatdataimgI;

        for(i;i<imagelength;i++){

            wxdownloadFile({

                url: thatdataurl+image[i],

                success (res) {

                    if (resstatusCode === 200) {

                        wxsaveImageToPhotosAlbum({

                            filePath: restempFilePath,

                            success(res){

                                if (i==imagelength) {

                                    wxshowToast({

                                        title: '保存成功',

                                    })

                                } else {

                                    thatsetData({

                                        imgI:i+1

                                    })

                                    thatloadImg()

                                }

                            }

                        })

                    }

                }

            })

        }

    },

这里的是JS传进来的一个变量,但是在显示某个框框的时候将这个值设为一个路径值,即在选择的时候,会因为其路径并不是在该项目的相关路径中,导致报以下错误。

给加一个  v-if="objcover"

<image class="img_order" mode="aspectFill" v-if="objcover&&objcover!=''" :src="objcover"/>

以上就是关于微信小程序导航背景图片是放本地还是远程全部的内容,包括:微信小程序导航背景图片是放本地还是远程、请问微信小程序image设置了mode=‘aspectFill’,canvas怎么画出这效果、微信小程序图片不显示,模拟器可以显示解决等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/9331991.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-27
下一篇 2023-04-27

发表评论

登录后才能评论

评论列表(0条)

保存