微信小程序压缩图片并上传到服务器(拿去即用)
这里注意一下,图片压缩后的宽度是画布宽度的一半
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 服务器:阿里云 这里介绍微信小程序如何 ...
随机推荐
- 67.基于nested object实现博客与评论嵌套关系
1.做一个实验,引出来为什么需要nested object 冗余数据方式的来建模,其实用的就是object类型,我们这里又要引入一种新的object类型,nested object类型 博客,评论,做 ...
- ubuntu 下安装wine
PPA地址: https://launchpad.net/~ubuntu-wine/+archive/ppa 添加wine的ppa源 sudo add-apt-repository ppa:ubunt ...
- python正则表达式的好文章(转)
http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html https://blog.csdn.net/shw800/article/det ...
- angular环境安装与配置
1.安装npm和nodejs,下载地址:https://nodejs.org/en/download/ node -v npm -v 2.配置淘宝代理,下载node_modules npm con ...
- 【Codeforces 484A】Bits
[链接] 我是链接,点我呀:) [题意] 让你求出l~r当中二进制表示1的个数最多的数x [题解] 最多有64位 我们可以从l开始一直增大到r 怎么增大? 找到l的二进制表示当中0所在的位置 假设i这 ...
- [luoguP1351] 联合权值(Dfs)
传送门 距离为2的点会产生权值,第一问,只需要在dfs的时候把一个点相邻的点都处理出来就行. 具体处理方式看代码,然而这样只处理了一遍,最后在乘2就好了. 第二问只需要处理一个点相邻的点中最大的和次大 ...
- node.js 利用流实现读写同步,边读边写
//10个数 10个字节,每次读4b,写1b let fs=require("fs"); function pipe(source,target) { //先创建可读流,再创建可写 ...
- 旅游电车(cogs 1175)
[问题描述] Henryy国正致力于首都的一个旅游电车建设工程.首都有N个旅游景区.Henryy国的电车永远只沿道路规定的方向行驶,为了不使投入使用的电车有可能无法回到它的起始站,Henryy希望知道 ...
- ECMAScript 6 入门学习笔记(二)——变量的解构赋值
一.数组的解构赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; ①可多不可少,等号的右边是数组 let [x, y] = [1, 2, 3]; //可以 let ...
- 使用微信JSSDK实现图片上传
近期做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发人员文档链接:微信开发人员文档 主要用到了: 引入JS文件 在须要调用JS接口的页面引入例如以下JS文件.(支持https) ...