微信小程序-将图片裁剪成规定的尺寸

需求：

图片上传时，要求必须是720*720大小的图片，但是用camera拍出来的照片大小不固定，有的手机是720*720，有的就是1080*1080，还有480*480的

解决办法：

将图片转换成canvas，再在canvas中操作，最后将canvas转换图片导出

先大概贴一下html代码和js中的data

  <view style='height:292px;width:292px;'><camera wx:if="{{complated!=true}}" device-position="front" flash="off" class='face-image'></camera><!-- 给用户展现的图片 --><image wx:if="{{complated==true}}" class='face-image' src='{{faceUrl}}'></image><!-- 辅助裁剪的canvas，不显示给用户，因为720太大，界面放不下 --><canvas canvas-id='image-canvas' style='width:720px;height:720px;position:fixed;top:-10000px;left:-10000px;'></canvas></view>

data: {complated: false,   // 拍照是否完成faceUrl: ''         // 图片的临时路径
},

重点来了~

1.拍照

(检查拍到的图片大小是否是720*720，是的话，不用处理，如果不是，就调用我们自己写的图片处理函数loadTempImagePath进行处理)

const ctx = wx.createCameraContext()
// 拍照
ctx.takePhoto({quality: 'normal',success: (res) => {var tempImagePath = res.tempImagePath;   // 拍的照片的临时地址// 获取图片详情wx.getImageInfo({src: tempImagePath,success: res => {// 检查图片宽高等于720if (res.width == 720 && res.height == 720) {that.setData({complated: true, faceUrl: tempImagePath})return;}else{that.loadTempImagePath(tempImagePath)}},fail: fail => {console.log('获取拍照信息失败了')that.loadTempImagePath(tempImagePath)}})}})

2.图片处理函数loadTempImagePath

// 参数options是拍照获取到的临时路径
loadTempImagePath(options) {var that = this;// 矩形的位置 (设置了要求的大小:720)var image_x = 0;var image_y = 0;var image_width = 720;var image_height = 720;//过渡页面中，图片的路径坐标和大小var canvas = wx.createCanvasContext("image-canvas")canvas.drawImage(options, 0, 0, image_width, image_height)wx.showLoading({title: '数据处理中...',icon: 'loading',mask: true,duration: 10000})// 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的过渡页面中，对裁剪框的设定canvas.strokeStyle = '#f4f8f9';canvas.strokeRect(image_x, image_y, image_width, image_height)canvas.draw(true, function(){wx.canvasToTempFilePath({ //裁剪对参数canvasId: "image-canvas",// x: image_x, //画布x轴起点// y: image_y, //画布y轴起点// width: image_width, //画布宽度// height: image_height, //画布高度// destWidth: image_width, //输出图片宽度// destHeight: image_height, //输出图片高度success: function (res) {console.log('图片处理成功了',res)that.setData({complated: true, faceUrl: res.tempFilePath})wx.hideLoading()},fail: function (e) {wx.hideLoading()wx.showToast({title: '出错啦...',icon: 'loading'})}})})},

微信小程序-将图片裁剪成规定的尺寸相关推荐

微信小程序中base64转换成图片；uni-app小程序base64转图片；微信小程序base64文件转图片；微信小程序base64图片转图片
将微信小程序的图片转成base64 点击此链接看另一篇以下是将后端返回的base64转成图片: 方法1:使用微信小程序自带方法 //把base64转换成图片getBase64ImageUrl: (b ...
微信小程序image图片预览时不显示（后缀问题！）
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
Java实现微信小程序校验图片是否含有违法违规内容
文章目录 1.Java实现微信小程序校验图片是否含有违法违规内容(security.imgSecCheck) 2.接口文档简述 3.Java实现对接接口 4.压缩图片(Thumbnails) 5.整合 ...
微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序渲染图片报错：[渲染层网络层错误] Failed to load local image resource
微信小程序渲染图片报错解决:[渲染层网络层错误] Failed to load local image resource 背景通过用户点击上传图片,通过res.tempFilePaths拿到用户上传 ...

微信小程序-将图片裁剪成规定的尺寸

需求：

解决办法：

1.拍照

2.图片处理函数loadTempImagePath

微信小程序-将图片裁剪成规定的尺寸相关推荐

最新文章

热门文章