Detailed introduction to HTML5 Canvas image and text code for processing avatar uploads

var ImageEditor = function() {

    // 用离线canvas处理图片数据

    this.canvas = document.createElement('canvas');

    this.context = this.canvas.getContext('2d');

};

var fn = ImageEditor.prototype;

fn.resizeCanvas = function(width, height) {

    this.canvas.width = width;

    this.canvas.height = height;

};

fn.clipSquareImage = function(url, callback) {

    var that = this,

        img = new Image();

    img.src = url;

    img.onload = function() {

        // 取宽高最小值作为正方形边长

        var eLength = Math.min(img.width, img.height),

            picture = img;

        // canvas不支持局部截屏，截屏前必须先调节canvas的宽高

        that.resizeCanvas(eLength, eLength);

        // 将图片以居中裁剪的方式画到canvas中。

        // drawImage支持9个参数：图片对象，图片上的剪切坐标XY，

        // 剪切宽高，图片在canvas上的坐标XY及图片宽高

        that.context.drawImage(picture,

            (picture.width - eLength) / 2, (picture.height - eLength) / 2,

            eLength, eLength, 0, 0, eLength, eLength);

        // 截屏，即获取base64数据

        callback.call(that, that.canvas.toDataURL('image/png'));

    };

};

chrome          = 32767x32767

iPod Touch 16GB = 1448x1448

iPad Mini       = 2290x2289

iPhone 3        = 1448x1448

iPhone 5        = 2290x2289

var MAX_WIDTH = 1000;

fn.clipSquareImage = function(url, callback) {

    var that = this,

        img = new Image();

    img.src = url;

    img.onload = function() {

         // 取图片宽高和Canvas的最大宽度的最小值作为等边长

        var eLength = Math.min(img.width, img.height, MAX_WIDTH),

            // 剪切对象

            picture = img,

            tempEditor,

            ratio;

            // 如果图片尺寸超出限制

            if (eLength === MAX_WIDTH) {

                // 创建一个临时editor

                tempEditor = new ImageEditor();

                ratio = img.width / img.height;

                // 按图片比例缩放canvas

                img.width < img.height ？

                    tempEditor.resizeCanvas(MAX_WIDTH * ratio, MAX_WIDTH) ：

                    tempEditor.resizeCanvas(MAX_WIDTH, MAX_WIDTH / ratio);

                tempEditor.context.drawImage(img, 0, 0, tempEditor.canvas.width, tempEditor.canvas.height);

                // 将临时Canvas作为剪切对象

                picture = tempEditor.canvas;

                eLength = Math.min(tempEditor.canvas.width, tempEditor.canvas.height);

            }

            // 居中剪切

            // ... ...

            // 截屏操作

            // ... ...

    };

};

var editor = new ImageEditor;

// 将图片缩放到300x300

// drawImage支持5个参数：图片对象，及图片在canvas上的坐标和宽高

editor.context.drawImage(squareImage, 0, 0, 300, 300);

fn.antialisScale = function(img, width, height) {

    var offlineCanvas = document.createElement('canvas'),

        offlineCtx = offlineCanvas.getContext('2d'),

        sourceWidth = img.width,

        sourceHeight = img.height,

        // 缩小操作的次数

        steps = Math.ceil(Math.log(sourceWidth / width) / Math.log(2)) - 1,

        i;

    // 渲染图片

    offlineCanvas.width = sourceWidth;

    offlineCanvas.height = sourceHeight;

    offlineCtx.drawImage(img, 0, 0, offlineCanvas.width, offlineCanvas.height);

    // 缩小操作

    // 进行steps次的减半缩小

    for(i = 0; i < steps; i++) {

        offlineCtx.drawImage(offlineCanvas, 0, 0,

            offlineCanvas.width * 0.5, offlineCanvas.height * 0.5);

    }

    // 放大操作

    // 进行steps次的两倍放大

    this.context.drawImage(offlineCanvas, 0, 0,

        offlineCanvas.width * Math.pow(0.5, steps),

        offlineCanvas.height * Math.pow(0.5, steps),

        0, 0, width, height);

};

fn.scaleSquareImage = function(url, sizes, callback) {

    var that = this;

    // 先裁剪一个正方形

    that.clipSquareImage(url, sizes, function(data) {

        var squareImage = new Image(),

            result = [],

            i;

        squareImage.src = data;

        // 抗锯齿缩放

        for (i = 0; i < sizes.length; i++) {

            that.antialisScale(squareImage, sizes[i], size[i]);

            result.push(that.canvas.toDataURL('image/png'));   

        }

        callback.call(that, result);

    });

};

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC

<?php

    $imgData = $_POST['imgData'];

    // 截取有用的部分

    list($type, $imgData) = explode(';', $imgData);

    list(, $imgData)      = explode(',', $imgData);

    // base64 编码中使用了加号，

    // 如果通过url传递base64数据，+号会转换成空格

    $imgData = str_replace(' ', '+', $imgData);

    // 存储文件

    $success = file_put_contents('PATH/XXX.png', base64_decode($imgData));