xuweilu / wx-image-uploader

An image uploader for weixin mini program, could compress the original image and export image to base64 with weixin canvas, also fixed the wrong orientation issue when export image in iOS.

Transform image to base64 data in weixin mini program.

Use weixin mini program native wx.canvasGetImageData and upng API to transform image to base64.

Contents

• Main
• Getting started

Main

src/
├── index.js        (Main output)
├── checkOriention.js    (check if the output image's orientation is right)
├── getBase64Image.js    (get base64 data from an image)
└── upng-js (dependency)

Getting Started

Usage

Syntax

Because weixin mini program cannot use npm package, you should copy src directory to your program root directory.

var helper = require('../../src/index.js');

helper.checkOrientation(checkCanvasId);

helper.getBase64Image(workCanvasId, imgUrl, callback, imgWidth, imgHeight);

checkCanvasId

• Type: String

• Required

A hidden canvas just for checking if the orientation is right, should be like

<canvas style="width:2px;height:2px;visibility:hidden;" canvas-id="checkCanvas"></canvas>

Then the checkCanvasId is 'checkCanvas'

workCanvasId

• Type: String
• Required

This is the main canvas to handle all logics to transform the image, we should put our image into this canvas and then pass its id to the function.

 <canvas style="width: 300px; height: 200px;" canvas-id="workCanvas"></canvas>

Then the workCanvasId is 'workCanvas'

Example

<canvas style="width: 300px; height: 200px;" canvas-id="workCanvas"></canvas>
<canvas style="width:2px;height:2px;visibility:hidden;" canvas-id="checkCanvas"></canvas>

When first time load the app, run this command:

var helper = require('../../src/index.js');
Page({
...
  onReady: function() {
    // 首次进入，利用隐藏的judgeCanvas判断当前导出图像是否颠倒
    helper.checkOrientation('checkCanvas');
  },
     
  // Then use helper.getBase64Image to transfrom image anywhere you want.
  transformImage: function () {
    var _this = this;
    helper.getBase64Image('workCanvas', imgUrl, function(base64data){
        // work with the base64 data
        ...
    });
  }
...
})

全文请详见微信小程序图片压缩及base64化上传

wx-image-uploader's Issues

问题反馈

加'data:image/png;base64,'

在getBase64Image方法中， 加'data:image/png;base64,' ，会引起服务端存在图片无法预览。
即使是换成jpg，或bmp都一样，无法预览。
处理方法
直接回调base64值，如 callback(base64Data);

图片上下颠倒

代码中有按要求调用了以下代码：

onReady: function() {
    // 首次进入，利用隐藏的judgeCanvas判断当前导出图像是否颠倒
    imageHelper.checkOrientation('checkCanvas');
  }

表现
部分安卓设备出现图片上下颠倒。

处理方法
getBase64Image方法添加入参platform。此值来源SystemInfo.platform。
代码改为：

var result;
        var isOrientationRight = wx.getStorageSync('isOrientationRight');
        //根据之前获得的当前设备canvas导出图片是否正常来确定是否反转上传图片
        if (isOrientationRight) {
          result = res;
        } else {
          if (platform === 'android'){
              //android系统不主动做旋转
              result = res;
          }else{
            result = reversedata(res); 
          }          
        }

如有有错误，请指正。