小程序canvas图片旋转

 <!-- 旋转图片canvas --><canvas canvas-id="camCacnvs" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position:absolute;top:-2000%;" class="canvsborder"></canvas>

 //当前图片的地址  只能使用本地图图片 如果是网络图片 要下载到本地let tempFilePaths = res.tempFilePaths[0];  wx.getImageInfo({ // 获取图片的信息src:tempFilePaths,success:(msg)=>{console.log(msg)let height = msg.height / 2  //图片的高let width = msg.width / 2//开始旋转  旋转方向为顺时针  90  180  270  if(width<height){   // 竖变横   左为正底   旋转后 为下为正底that.setData({canvasWidth: height,canvasHeight: width,},()=>{console.log('这张图片 是竖的 要变成横屏的')//绘制canvas 旋转图片let canvas = wx.createCanvasContext('camCacnvs');// 逆时针旋转90度canvas.translate(height / 2, width / 2)canvas.rotate(270 * Math.PI / 180)canvas.drawImage(tempFilePaths, -width / 2, -height / 2, width, height);canvas.draw(false, () => { // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中// 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。wx.canvasToTempFilePath({ canvasId: 'camCacnvs',success(vas) {console.log(vas)that.uploadImg(vas.tempFilePath);  }})// 在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件})})}}})

下载网路图片到本地

// 第一步： 既然要缓存图片，那么我们要先将图片下载下来。
// wx.downloadFile 必填参数url: 图片的地址。
//当图片下载成功以后，会返回给我们一个tempFilePath。临时的文件路径
//那么问题来了，这个临时的文件路径到底怎么理解呢？
//本地临时文件只能通过调用特定接口产生，不能直接写入内容。本地临时文件产生后，
//仅在当前生命周期内有效，重启之后即不可用。因此，不可把本地临时文件路径存储起来下次使用
//上面的是微信小程序 文档对临时的文件路径的解释。
//所以到这一步， 这个临时的文件路径不满足我们的需求。那么接下来我们怎么利用这个临时文件路径实现本地缓存呢？
wx.downloadFile({url: 'xxxxxxx',success: function(res) {if (res.statusCode === 200) {console.log('图片下载成功' + res.tempFilePath)// 第二步: 使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器const fs = wx.getFileSystemManager()//  fs为全局唯一的文件管理器。那么文件管理器的作用是什么，我们可以用来做什么呢？//   文件管理器的作用之一就是可以根据临时文件路径，通过saveFile把文件保存到本地缓存.fs.saveFile({tempFilePath: res.tempFilePath, // 传入一个临时文件路径success(res) {console.log('图片缓存成功', res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径  // 此时图片本地缓存已经完成，res.savedFilePath为本地存储的路径。//小程序的本地文件路径标准： {{协议名}}://文件路径//协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，//开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。//好了，到此为止，我们已经把图片缓存到本地了，而且我们也得到了本地缓存的路径。// 那么我们把本地缓存的路径，通过小程序的数据缓存服务保存下来。// 下次打开小程序 首先去缓存中检查是否存在本地文件的缓存路径// 如果有，直接image src赋值本地缓存路径。//如果没有，则是第一次下载图片，或者用户手动清理缓存造成的。wx.setStorageSync('image_cache', res.savedFilePath)}})}else {console.log('响应失败', res.statusCode)}}

wx.chooseImage({sizeType: ['original', 'compressed'],sourceType: [type],success: function(result) {let tempFilePaths = result.tempFilePaths // 获得文件地址wx.getImageInfo({ // 获取图片的信息src: tempFilePaths[0],success: (res) => {let canvasContext = wx.createCanvasContext('camCacnvs')// 下面按比例写死宽度高度是为了压缩图片提升上传速度，可按实际需求更改let rate = res.height / res.width let width = 500let height = 500 * rateswitch (res.orientation) { // 根据orientation值处理图片case ("up")://不需要旋转_this.setData({canvasWidth: width,canvasHeight: height,})canvasContext.drawImage(tempFilePaths[0], 0, 0, width, height);break;case ("down")://需要旋转180度that.setData({canvasWidth: width,canvasHeight: height,})canvasContext.translate(width / 2, height / 2)canvasContext.rotate(180 * Math.PI / 180)canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height);break;case ("left")://顺时针旋转270度that.setData({canvasWidth: height,canvasHeight: width,})canvasContext.translate(height / 2, width / 2)canvasContext.rotate(270 * Math.PI / 180)canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height);break;case ("right")://顺时针旋转90度that.setData({canvasWidth: height,canvasHeight: width,})canvasContext.translate(height / 2, width / 2)canvasContext.rotate(90 * Math.PI / 180)canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height)break;}canvasContext.draw(false, () => { // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中wx.canvasToTempFilePath({ // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。canvasId: 'camCacnvs',success(res) {//}})})

小程序canvas图片旋转相关推荐

微信小程序操作图片放大、缩小、旋转、拖拽
微信小程序操作图片放大.缩小.旋转.拖拽在开发小程序的时候遇到了上传图片,然后编辑的需求.打算网上找一下相关代码组件的,就不用自己搞这么麻烦.经过一番折腾,还是没有找到如意的,最后自己弄好了,记录一 ...
uni保存canvas图片_小程序canvas【开箱即用】
前言小程序canvas有多坑,相信开发过的同学们都深有体会每一次写使用canvas都忍不住骂两句鉴于此,小弟就从0开始,一步一步实现画图功能,并且列明所有我遇到的坑注意:本文都是基于uni开发 ...
小程序Canvas绘制图片太大，自动闪退，安卓会有crash问题
2019独角兽企业重金招聘Python工程师标准>>> 问题说明: 目前小程序Canvas版本还有不少bug,性能较低. 对于图片太大使用ctx.drawImage(imgpath, ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
小程序canvas 2d 绘图无法drawImage图片？
小程序canvas 2d 绘图无法drawImage图片? 微信iOS 7.0.20 版本使用canvas 2d 绘制drawImage时无法成功绘制,图片不显示,img1.onload不执行,执行 ...
小程序canvas分享图片模糊解决方案
看到网上有好多小程序分享图片显示及导出模糊问题,想了下解决方案备用: 1.原因: 因为 canvas 不是矢量图,而是像图片一样是位图模式的.高 dpi 显示设备意味着每平方英寸有更多的像素.比如说二 ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
双指缩放canvas图片_小程序实现图片双指缩放
一:小程序实现图片双指缩放介绍 1:大体思路监听图片加载完成给图片初始化宽高 ▶ 双手指触发开始计算两个手指坐标的距离 ▶ 双手指移动计算两个手指坐标和距离 ▶ 根据探测到用户的手指距离变化, ...
微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...

小程序canvas图片旋转

小程序canvas图片旋转相关推荐

最新文章

热门文章