如果是本地资源文件,直接将data中需要绘制的图片路径赋值即可。我的需求是接口返回数据,绘制生成图片保存手机。
首先在微信公众平台填写安全域名,每个月只有5次配置域名机会,还有两次(瑟瑟发扌斗)
设置请求request和微信头像fileloadFile两个域名。小程序开发-开发设置-服务器域名 填写对应域名。
可设置固定canvas宽高,我是动态获取根据设备变化的。主要是为了绘制时起始位置的坐标和屏幕宽高不同,绘制图片会定位不准确。不适配不考虑,因为后期计算坐标和宽高也很烦
这是wxml代码和一个按钮的样式,按需求自定义
<view class="content">
<view class="canvasBox">
<canvas canvas-id='myCanvas' style='width:{
{windowW}}px;height:{
{windowH}}px;margin: 0 auto;padding: 0;display:block;'></canvas>
</view>
<view class="btn" bindtap="saveImage">保存图片</view>
</view>
<!-- 只设置按钮样式 记得拆分 -->
.btn{
background: #EC6128;
height: 60rpx;
width: 500rpx;
border-radius: 20rpx;
margin: 0 auto;
margin-top: 20rpx;
color: #fff;
text-align: center;
line-height: 60rpx;
}</