微信小程序压缩图片并上传到服务器(拿去即用)
这里注意一下,图片压缩后的宽度是画布宽度的一半
canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败,这里加setTimeout来缓冲一下
这是单张图片压缩,多张的压缩暂时还没有成功,保存到服务器上后是空白的,如有大神望指点一二
<canvas canvas-id='photo_canvas' style='width:1000rpx;height:{{canvas_h}}px' class='myCanvas'></canvas>
/**压缩图片 */ compressionImage(tempFilePaths, params) { let that = this wx.getImageInfo({ src: tempFilePaths[0], success: function(res) { var ctx = wx.createCanvasContext('photo_canvas'); //设置canvas尺寸 var towidth = 500; //按宽度500px的比例压缩 var toheight = Math.trunc(500 * res.height / res.width); that.setData({ canvas_h: toheight }) ctx.drawImage(tempFilePaths[0], 0, 0, res.width, res.height, 0, 0, towidth, toheight) that.createMap(ctx, params); } }) }, /**创建画布并上传图片 */ createMap(ctx, params) { let that = this; ctx.draw(true, function() { wx.showLoading({ title: '压缩中', }) setTimeout(() => { wx.canvasToTempFilePath({ canvasId: 'photo_canvas', fileType: "jpg", success: function(res) { wx.hideLoading(); wx.uploadFile({ url: app.globalData.baseUrl + '/wechat/want/addWant', filePath: res.tempFilePath, name: 'file', formData: { 'parameters': JSON.stringify(params) }, success: function(res) { console.log("state:" + JSON.parse(res.data).state) if (JSON.parse(res.data).state === 1) { wx.showToast({ title: '发布成功', duration: 2000, icon: "none", success() { setTimeout(function() { wx.navigateBack({ delta: 1, }) }, 1000); } }) } }, fail(res) { console.log("fail" + res) } }) }, fail(res) { if (res.errMsg === "canvasToTempFilePath:fail:create bitmap failed") { console.log("导出map失败") } } }, this) }, 200); }) },
微信小程序压缩图片并上传到服务器(拿去即用)的更多相关文章
- 微信小程序 压缩图片并上传
转自https://segmentfault.com/q/1010000012507519 wxml写入 <view bindtap='uploadImg'>上传</view> ...
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- 微信小程序实现图片裁剪上传(wepy)
参考https://github.com/we-plugin/we-cropper,在wepy中实现,参考的具体例子是we-cropper/example/cutInside/ 项目上传图片时2:3的 ...
- 微信小程序裁剪图片后上传
上传图片的时候调起裁剪页面,裁剪后再回调完成上传; 图片裁剪直接用we-cropper https://github.com/we-plugin/we-cropper we-cropper使用详细 ...
- HTML5 Canvas前台压缩图片并上传到服务器
1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...
- 微信小程序入门八头像上传
1. action-sheet 底部弹出可选菜单组件 2. wx.uploadFile 将本地资源上传到服务器 3. wx.chooseImage 从本地相册选择图片或使用相机拍照. 4. wx.pr ...
- 微信小程序:多张图片上传
最近在写小程序的相册,需要多张图片的上传.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定.分享下,不足之处,多多指教哦 页面wxml: <form ...
- 微信小程序--更换用户头像/上传用户头像/更新用户头像
changeAvatar:function (){ var that=this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'c ...
- [转]微信小程序实现图片上传功能
本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...
随机推荐
- (C/C++学习)23.C++中指针的长度
引言:先看下面一个程序会打印出什么? #include<iostream> using namespace std; int main() { int a = 2; int *p = &a ...
- 10 Minutes to pandas中文版
本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook .习惯 ...
- Django ContentType内置组件
一.引出问题 假如有这两张表,它们中的课程可能价格不一样.周期不一样.等等...不一样...,现在有一张价格策略表,怎么就用一张表报保存它们之间不同的数据呢? 可能你会这样: 确实是行!但是,如果有很 ...
- Python单例模式的实现方式
一.单例类 单例模式(Singleton Pattern)是 Python 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式涉及到一个单一的类,该类 ...
- LINUX-光盘
cdrecord -v gracetime=2 dev=/dev/cdrom -eject blank=fast -force 清空一个可复写的光盘内容 mkisofs /dev/cdrom > ...
- 关于React.PropTypes的废除,以及新版本下的react的验证方式
React.PropTypes是React用来typechecking的一个属性.要在组件的props上运行typechecking,可以分配特殊的propTypes属性: class Greetin ...
- 【Codeforces 567D】One-Dimensional Battle Ships
[链接] 我是链接,点我呀:) [题意] 长度为n的一个序列,其中有一些部分可能是空的,一些部分是长度为a的物品的一部分 (总共有k个长度为a的物品,一个放在位置i长度为a的物品会占据i,i+1,.. ...
- Android layer-list(3)
Android layer-list(3) 在附录文章3.4的基础上,就Android layer-list再写一个较为复杂的应用. 先写布局文件,该布局涉及到LinearLayoutCompa ...
- hdu 2255KM算法模板
#include<stdio.h> #include<string.h> #define N 400 #define inf 0x7fffffff int Max(int a ...
- poj——2891 Strange Way to Express Integers
Strange Way to Express Integers Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 16839 ...