android canvas 网络图,小程序canvas drawImage 加载网络图片踩得坑

您好啊,我使用 downloadFile 或是 getImageInfo 转成本地还是画不出来呀,求教.

好了,还是我自己发现问题了,然后楼主的问题,我在 2.0.8 版没有出现,也许是腾讯自己加白名单了吧,那个链接,下载不同步画图,还有指向问题都是造成大家的网络图片画不出来,我借楼主的地方放个代码,画出网络图片,谢谢。

drawPage: function () {

var that = this; //这个要保存起来,给下面 context.draw(true, that.getTempFilePath);使用

var context = wx.createCanvasContext('share');

var avatar = this.data.avatar;

this.setData({

canvasSwitcher: true

})

wx.downloadFile({

url: avatar,

success: function (res) {

if(res.tempFilePath) {

context.drawImage(res.tempFilePath, 150, 260, 30, 30);

context.draw(true, that.getTempFilePath);

}

}

})

var images = '../images/Bitmap.png';

context.setFillStyle('#f2f2f2');

context.drawImage(images, 10, 10, 295, 250);

console.log(avatar)

context.setFontSize(20);

context.setFillStyle("#666");

context.fillText('232', 230, 380);

context.fillText('累积完成', 200, 400);

context.fill();

context.draw(true, this.getTempFilePath);

},

getTempFilePath:function(){

console.log(121221)

wx.canvasToTempFilePath({

canvasId: 'share',

success: (res) => {

this.setData({

shareTempFilePath: res.tempFilePath

})

}

})

},

应为网络图片下载要花时间,所以不同步,不想等就请画别的 draw 的第一个参数写 true

今天重新修正,上线后发现图片保存不了,确实是要把头像下载地址加到白名单,被坑到了。

### 微信小程序 Canvas 绘制网络图片教程 在微信小程序中,`<canvas>`组件可以用于绘制各种图形和图像。为了从网络加载并显示图片Canvas上,需遵循特定的方法来获取远程资源并将之渲染至布。 #### 获取网络图片数据 由于安全原因,直接通过URL路径设置给`drawImage()`方法可能会生效,因此推荐先下载图片转成临时文件的形式再进行操作。可利用`wx.downloadFile` API完成此过程[^1]: ```javascript // 下载网络图片 function downloadNetworkImage(url, callback) { wx.downloadFile({ url: url, success(res) { if (res.statusCode === 200) { // 成功返回临时文件路径 typeof callback === 'function' && callback(null, res.tempFilePath); } else { console.error('Download failed'); typeof callback === 'function' && callback(new Error(`Failed to download image with status code ${res.statusCode}`)); } }, fail(err) { console.error('Error downloading file', err); typeof callback === 'function' && callback(err); } }); } ``` #### 将图片绘制到Canvas上 一旦获得了图片本地临时路径,则可以通过调用`ctx.drawImage()`函数将其放置于指定位置尺寸之上。下面是一个完整的例子展示如何实现这一点: ```html <!-- WXML --> <view class="container"> <button bindtap="handleDraw">点击绘制</button> <canvas type="2d" id="myCanvas"></canvas> </view> ``` ```css /* WXSS */ .container { display: flex; flex-direction: column; } #myCanvas { width: 375px; /* 设置合适的宽度 */ height: auto; /* 自动调整高度保持比例 */ } ``` ```javascript Page({ handleDraw() { const ctx = wx.createCanvasContext('myCanvas'); let imageUrl = "https://example.com/path/to/image.jpg"; // 替换成实际网址 downloadNetworkImage(imageUrl, function(error, tempFilePath){ if (!error) { ctx.drawImage(tempFilePath, 0, 0); // 参数分别为:图片源、左上角横坐标X、纵坐标Y // 如果需要裁剪或缩放,可以在第三个参数之后继续添加宽高属性 // 如下所示: // ctx.drawImage(tempFilePath, 0, 0, canvasWidth, canvasHeight); ctx.draw(); } else { console.log("无法加载图片:" + error.message); } }); } }); ``` 上述代码片段展示了怎样在一个按钮点击事件处理器内触发网络图片向Canvas上的转换流程。注意这里假设已经定义好了前面提到的帮助函数`downloadNetworkImage`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值