小程序开发 / 公众号

1,canvas导出的图片清晰度

为保证canvas导出的图片清晰度,可以画二倍图导出一倍比例,canvas导出图片方法最好设置一个setTimeout延迟,
否则容易出现样式混乱问题

2,canvas真机绘制图片无效

小程序的canvas绘制图片的时候,base64图片需要转换成本地临时图片,否则真机绘制或导出无效

3,真机预览调试不显示图片

1,路径不能有中文
2,最好使用网络图片或者base64
3,使用image标签需要使用绝对路径 '/xxxx/xxxx.png'

4,选择手机图片(或者拍照)后ios设置背景白屏的问题

用background-image有这样的问题,换成使用<image>标签解决这个问题

5,小程序自定义遮罩层穿透滑动后面的内容

给遮罩层一个滑动事件,什么都不做

//定义滑动事件
<view catchtouchmove="move"></view>
//事件
move() {}

6,小程序通讯录首字母索引

点击查看

7,公众号getLocalImgData方法安卓兼容问题

安卓使用getLocalImgData方法可能会出现得到的base64没有 "data:image/jpeg;base64,",所以需要进行判断
环境对获得的字符串进行处理,以下为ios和安卓的兼容写法:

window.wx.getLocalImgData({
    localId: id, // 图片的localID
    success:res => {
        let {localData} = res; // localData是图片的base64数据，可以用img标签显示
        if (localData.startsWith('data:image')) { //判断是否有这样的头部
            // 没有则加上头部
            localData = 'data:image/jpeg;base64,' +  localData
        }
        // 去掉所以换行符
        localData = localData.replace(/\r|\n/g, '') 
    }
})