小程序中canvas绘制网络图片

小程序中，canvas绘制图片，可使用drawImage方法，但是绘制网络图片时，在手机端不会显示，需要先将网络图片下载到本地，然后用图片的本地路径绘制。如下伪代码：

function downLoadImg(netUrl, storageKeyUrl) {wx.getImageInfo({src: netUrl,    //请求的网络图片路径success: function (res) {//请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中
        wx.setStorage({key: storageKeyUrl,data: res.path,});}})}

downLoadImg(参数一，参数二)//调用如上方法

var headUrl = wx.getStorageSync(storageKeyUrl); //下面用canvas绘制头像

const ctx = wx.createCanvasContext('myCanvas');

var wxSys = wx.getSystemInfoSync();

var screenScale = wxSys.screenWidth * 2 / 750;

ctx.save(); // 保存当前ctx的状态 ctx.arc(screenScale * 182, screenScale * 355, screenScale * 22, 0, 2 * Math.PI, false); ctx.strokeStyle = '#e3e7e8'; ctx.stroke(); ctx.clip(); //裁剪上面的圆形 

if (typeof (headUrl) != 'undefined' && headUrl != '') { 　　ctx.drawImage(headUrl, screenScale * 160, screenScale * 333, screenScale * 44, screenScale * 44); // 在刚刚裁剪的园上画图  } ctx.restore(); // 还原状态

注意：在请求网络图片时，请求的域名需要在微信服务器的downloadFile 域名内添加配置，否则请求报错。

转载于:https://www.cnblogs.com/huangxingquan/p/8608706.html

小程序中canvas绘制网络图片相关推荐

小程序利用canvas 绘制图案（生成海报，生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
小程序 uni canvas绘制圆角图片圆角矩形
小程序 uni canvas绘制圆角图片圆角矩形获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
小程序php生成海报,小程序用canvas绘制海报的做法
2020年第一篇文章,年初忙着复习刷题一直没空去写东西,书看的越多感觉越技不如人,始终徘徊在小菜鸡的行列中,最近项目里正好有一个canvas的业务,突然又燃起了我一个UI前端的火种,记下了踩坑和思考. ...
微信小程序使用canvas绘制分享海报
一.准备工作最近在做的一个vue项目中,需要做一个分享海报,头秃!!! 首先确定海报那些地方是随机变动的.海报背景.引用二维码生成组件(目前市场上有很多生成二维码的组件,这个项目用的是uqrcode ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序canvas画图案列,实现生成头像并保存,小程序新版canvas变化,小程序中canvas注意事项
你一定见过很多制作头像的小程序,无论是国庆的红旗,圣诞的帽子,还是疫情的口罩,都可以用小程序生成应景的头像,那么具体的代码是怎么实现的呢?前些天帮别人做了一个生成姓氏头像的功能,里面的实现原理基本一致 ...
微信小程序合成海报_利用微信小程序中Canvas API来合成海报生成组件封装
每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量.下面来介绍下其他的一种实现方式吧原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToT ...

小程序中canvas绘制网络图片

小程序中canvas绘制网络图片相关推荐

最新文章

热门文章