uniapp截取部分区域

通过canvas来绘制截取部分，然后保存

html部分
<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }"canvas-id="myCanvas"></canvas>
<view class="button" @click="save_temp"><text class="cuIcon-down"></text>保存到相册</view>

js部分data部分：canvasW:'',canvasH:'',
onload部分：this.canvasH = uni.getSystemInfoSync().screenHeightthis.canvasW = uni.getSystemInfoSync().screenWidth
methods部分:// 根据百分百计算px  主要用于结算页面高度getPersentageH(p){p = p /100let h = uni.getSystemInfoSync().screenHeightreturn parseInt(h * p)},// 画布方法draw(){/* 创建canvas实例 */let ctx = uni.createCanvasContext('myCanvas');/* 绘制背景图 */  this.path 根据项目中使用到的图片进行赋值ctx.drawImage(this.path,0,0,this.canvasW,this.canvasH);/* 设置字体颜色 */ctx.setFillStyle('#F76260')/* 设置字体大小 和字体family */ctx.font=`${uni.upx2px(30)}px Arial`;/* 设置字体对齐方式 */ctx.setTextAlign('center')/* 设置文字内容以及 canvas的位置 */ctx.fillText('十五个字十五个字十五个字十五个', this.canvasW/2, this.getPersentageH(61))/* 设置头像背景色，用于确定位置 */ctx.setFillStyle('#FBBD08')/* 在画圆截取图片之前保存当前canvas的所有内容 */ctx.save()/* 画笔开始 */ctx.beginPath()/* 画圆方法 坐标，坐标，半径，起始位置，结束位置（画圆固定 2 * Math.PI） */ctx.arc(uni.upx2px(377), this.getPersentageH(54), uni.upx2px(61), 0, 2 * Math.PI)/* canvas 截取API */ctx.clip()/* canvas 连接起始位置API */ctx.fill()/* 插入图片（头像） */ctx.drawImage(this.path1, uni.upx2px(315), this.getPersentageH(50.3),uni.upx2px(122),uni.upx2px(122))/* 截取图片后只能在截取部分现在，这一步是恢复画布 */ctx.restore()/* 放置最下方二维码 */ctx.drawImage(this.path, uni.upx2px(274), this.getPersentageH(67),uni.upx2px(204),uni.upx2px(204));/* 执行canvas的开始画画方法 */ctx.draw()}保存到相册：save_temp(){uni.canvasToTempFilePath({canvasId: 'myCanvas',success: res => {uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,complete: msg => console.log(msg)})},fail: err => console.log(err)})}

uniapp截取部分区域相关推荐

在视频中选定/截取部分区域画面，然后将左上角坐标百分比和选定区域宽高所占百分比传给后端
在视频中截取部分区域画面 1. 需求描述 2. 实现思路 3. 效果图展示 4. 代码 1. 需求描述在视频中选定部分区域,然后将左上角坐标百分比和选定区域宽高所占百分比传给后端 2. 实现思路播 ...
易语言快照和截取屏幕区域
本课录制了两个和截图有关的易语言命令,快照和截取屏幕区域,并且分快照窗口快照,全屏快照,保存快照,已经截屏区域等等. 视频链接: 511遇见易语言教程一.快照() 主要用于截图 1.窗口快照 2.全 ...
基于python-opencv和PIL的截取视频区域生成 GIF 动图
文章目录前言用`opencv`读取视频截取要生成gif的区域播放区域视频并选择开始帧和结束帧存储区域截图并用`PIL.Image`生成gif文件 demo源码: 实现效果: 前言很多时 ...
基于python-opencv的图像中截取多边形区域
最近在语义分割领域苦苦挣扎,模型训练出来后,效果只能说勉强接受,考虑能不能在语义分割模型后追加一层分类模型,对每一个区域再做一次分类.本文仅记录如何在原图中截取出多个多边形. 原图是这样的: 我想要是 ...
uniapp使用uCharts区域图
ucharts区域图的使用一.引入uCharts插件二.定义html模板和样式三.定义变量及宽高度四.调用接口获取数据五.ucharts图表数据渲染显示六.个人感悟一.引入uCharts ...
微信小程序拍照截取指定区域图片(话不多说，直接上代码)
效果图 wxml <camera wx:if='{{isShowCamera}}' class="camera-box" devic-position="width ...
从多个pdf文档中截取部分区域拼接成一个pdf文档
提取合并多个pdf页面中的子区域,形成一个没有分页符的页面. 输入input:多个pdf的Rect区域 areas in pdf 输出output:一页(只是一页)完整的pdf文档 a page of ...
java截取指定区域屏幕,Java 屏幕截取，抓取屏幕截图
Java 屏幕截取,抓取屏幕截图发布时间:2018-04-25作者:spider阅读(1519) import java.awt.Desktop; import java.awt.Dimension ...
微信小程序用canvas截取身份证区域 we-cropper
微信小程序拍照页面需要做成这个样子.评估了一下需求发现可以做.那么开整. 下载WeCropper 先把项目克隆下来 git clone https://github.com/we-plugin/we- ...
Arcgis 只有边界线的情况下如何截取目标区域（掩膜裁剪）
首先要明确文件类型,shp文件是矢量文件,raster是指栅格第一步: file/ add data 将文件都读取进来如上图所示,我读取了澳大利亚的蒸散发卫星图像以及其西南某一流域边界线的shp文 ...

uniapp截取部分区域

通过canvas来绘制截取部分，然后保存

uniapp截取部分区域相关推荐

最新文章

热门文章