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化上传