uniapp中canvas将矩形图片绘制成圆形图片以及保存canvas到手机

废话不多说直接上代码
本次是在uniapp中操作的但是canvas都一样
前提是你已经赋予了canvas宽高了

//先获取你的canvas
let ctx = uni.createCanvasContext('myCanvas', this);
ctx.save();
ctx.beginPath(); //开始绘制
//先画个圆   x,y是圆心的(x,y） 坐标 r是圆的半径 第四个参数是起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）  第五个参数是结束角，以弧度计  最后是绘图方向  默认是false，即顺时针
ctx.arc(x, y, r, 0, Math.PI * 2, false);
ctx.clip();//画好了圆 开始剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
// drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
//path 是用uni.getImageInfo 获取的地址
ctx.drawImage(path, x, y, width, height); // 推进去图片，必须是https图片
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制ctx.draw(true,(ret)=>{ // draw方法 把以上内容画到 canvas 中。uni.canvasToTempFilePath({ // 保存canvas为图片canvasId: 'myCanvas',quality: 1,complete: res=> {// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径//this.bg_Url = res.tempFilePath} ,})
});

希望能帮助到你们

uniapp中canvas将矩形图片绘制成圆形图片以及保存canvas到手机相关推荐

将矩形图片绘制成圆形图片
这周的安卓作业要做一个音乐播放器, 而图片那块需要添加音乐的封面, 获取到的封面为矩形图片, 如果要像网易云一样做一个唱片风格的封面需要将矩形图片绘制成圆形图片, 在StackOverflow上查找得 ...
微信小程序在一张canvas上把正方形图片绘制成圆形
因为最近在做分享功能,需要用户的头像在微信小程序中,然后写下其他文字,如何在把正方形图片放到canvas,导成圆角.找了两个参考资料,分别是用.clip()和.clearRect()两种方法微信小程 ...
中如何将方形图片转换成圆形图片_【PS】PS中不可不知的实用技巧！你都掌握了吗？...
今天给大家分享一些在PS中经常用到的实用小技巧,操作简单易上手. 01 拉伸图片人物不变形在我们在PS里想要拉伸一些图片时,里面的人物往往会跟着一起变形,那么如何改变图片比例的同时,又不影响人物的形 ...
如何将方形图片磨成圆形图片
如何将方形图片磨成圆形图片在开发中经常会有一些需求,比如显示头像,显示一些特殊的需求,将图片显示成圆角或者圆形或者其他的一些形状.但是往往我们手上的图片或者从服务器获取到的图片都是方形的.这时候就 ...
如何用photoshop将方形图片处理成圆形图片
有很多朋友在使用PPT的时候都会想要将PPT中的图片素材处理成圆形,这样看起来更美观,更大方.可是,却迟迟找不到将图片处理成圆形的方法.今天小编为大家分享如何用photoshop将方形图片处理成圆形图 ...
ios 将矩形图片裁剪成圆形图片
在ios中将一个正方形的图片裁剪成圆形的图片是一件非常容易的事情, 直接设置 imageView.layer.cornerRadius 这个属性, 再设置 imageView.clipsToBound ...
方形图片转换成圆形图片（涉及微信用户头像方形转换成圆形）
在一个性格测试题中最后生成一个带有用户头像的海报,中有用户的头像,在用户授权的时候拿到用户头像的url BufferedImage resultImg = null;String url=richSe ...
微信小程序canvas把正方形图片绘制成圆形
在微信小程序里效果图: 直接代码: <canvas style="width: 400px; height: 400px;border:1px solid red" canv ...
iOS-方形图片设置成圆形图片
创建一个方形的button,添加方形的背景图片,设置显示为圆形 self.view.backg ...

uniapp中canvas将矩形图片绘制成圆形图片以及保存canvas到手机

希望能帮助到你们

uniapp中canvas将矩形图片绘制成圆形图片以及保存canvas到手机相关推荐

最新文章

热门文章