uniapp canvas 合成头像

利用canvas先后绘制两张图片进行堆叠达到合成目的

<template><view class="content"><canvas style=" width: 750rpx; height: 500rpx" canvas-id="myApp" id="myApp"> </canvas></view>
</template><script>export default {data() {return {title: 'Hello',cavasCtx:null}},onLoad() {setTimeout(()=>{this.initCavas()},2000)},methods: {initCavas(){this.cavasCtx = uni.createCanvasContext('myApp',this)console.log(123);this.drapBg()},drapBg(){let _this = thisuni.downloadFile({url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F02%2F20200502102421_rxcyk.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661067122&t=de3516320905a4f5ce6a8843aa6c7eae',success: function (res) {_this.cavasCtx.save()_this.cavasCtx.beginPath()_this.cavasCtx.arc(100, 100, 100, 0, 2 * Math.PI)_this.cavasCtx.clip()_this.cavasCtx.drawImage(res.tempFilePath,0,0, 200, 200)_this.drapImg()}})},drapImg(){let _this = thisuni.getImageInfo({src:'/static/bg.png',complete: (res) => {_this.cavasCtx.drawImage(res.path, 0,0,200, 200)_this.cavasCtx.draw()setTimeout(()=>{_this.putOut()},100)}})},putOut(){uni.canvasToTempFilePath({x: 0,y: 0,width: 200,height: 200,canvasId: 'myApp',success: function(res) {console.log(res.tempFilePath)//下载完成后的东西} })}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>

uniapp canvas 合成头像相关推荐

uniapp canvas 图片加上文字合成一张新图并保存到手机相册
uniapp canvas 图片加上文字合成一张新图并保存到手机相册背景图上是奖章徽章,中间加上自定义文本,我这个图是因为背景图上原来就有字,随便找的,所以跟我写的文字层叠了具体实现代码 < ...
微信小程序 canvas 合成海报
1.先百度了解canvas相关文档: 2.了解微信小程序授权登录与授权登录下保存图片权限问题: 3.canvas标签属性不能是display:none: <canvas class=" ...
H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
android canvas 网络图,【巨坑:toDataURL】canvas合成网络图片
不知有没有小伙伴用过canvas合成图片,然后爆炸报错截图尼玛,然后各种搜索,不外乎以下几种坑爹处理方案: 后端处理,比如Access-Control-Allow-Origin "*&q ...
canvas合成海报所遇问题及解决方案总结
最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canv ...
移动端canvas合成图片，填充文字自动换行
今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡由于代码都是原生的没有引入其他库,所以直接将对应部分贴出来吧. html  <canvas id=& ...
uni-app上传头像base64转码
uni-app上传头像base64转码首先需要调起相册,使用 uni.chooseImage 方法选择相册,点击相册里面的图片, 确定可以选择图片并获取到图片的路径之后,uni-app官网有插件可以 ...
uniapp canvas绘制文字头像
效果如下图: 子组件代码: <template name="canvas-avatar"><canvas :id="canvasId" :ca ...
uniapp vue3 裁剪头像(ksp-cropper) 支持旋转和缩放
一.前言自己写个项目,需要用到裁剪头像功能,那肯定就在插件市场搜索,找到了它,感谢作者这个插件,很棒.我的使用环境 uniapp vue3 移动端 Android 真机测试. 具体我使用后的效果图如 ...
canvas合成图片圣诞节新技能戴帽
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

uniapp canvas 合成头像

uniapp canvas 合成头像相关推荐

最新文章

热门文章