奥门新浦京官方网站HTML5 Canvas处理头像上传

最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到这些问题,最后我们选用Canvas来完成图像尺寸缩放和图片数据获取。

这两天朋友圈被“圣诞帽”刷屏,这个小程序连微信官方都出来辟谣了,又一个现象级的玩意儿。从产品角度而言无疑是非常成功,但从技术角度而言是确实习以为常,创意很重要!简单说一下思路:获取头像,把头像画在Canvas里面,接着往Canvas里画帽子,调整帽子的参数(位置、大小、旋转),最后保存为图片。

等边处理

头像一般都是正方形,首先我们需要获取图片宽度和高度的最小值,用该最小值作为边长居中裁剪图片,最终得到一个正方形的图片:

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'));
    };
};

Canvas元素大小限制问题

上述clipSquareImage函数中,由于canvas.toDataURL接口不提供宽高参数,只能够一次性把整个canvas的屏幕数据截取下来,所以在对Canvas截屏前,我们必须先设置Canvas元素的大小。然而移动端拍照的分辨率极高,宽高大多会在3000以上,当我们根据相片宽高的最小值来设置Canvas的尺寸时,Canvas元素的最小宽度也高达到3000以上。

问题在于,每个平台对Canvas的大小都有限制,如果Canvas的宽度或高度任意一个值超过了平台限制,Canvas将无法进行渲染,canvas.toDataURL只能获取一张透明的图片数据。

Maximum size of a canvas
element中提到了部分平台下Canvas的尺寸限制:

chrome          = 32767x32767
iPod Touch 16GB = 1448x1448
iPad Mini       = 2290x2289
iPhone 3        = 1448x1448
iPhone 5        = 2290x2289

参考以上数据,我们先给Canvas设置一个最大的宽度:

var MAX_WIDTH = 1000;

clipSquareImage函数中加入最大宽度的检测,如果超过限制,则创建一个临时的canvas进行图片缩放处理,最后对该临时的Canvas进行居中剪切:

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);
            }
            // 居中剪切
            // ... ...
            // 截屏操作
            // ... ...
    };
};

先来看看效果

Canvas锯齿问题

上面我们已经能够通过Canvas裁剪出一张正方形的图片,接下来我们还需要处理头像图片大中小三种尺寸。在Canvas中,drawImage接口提供非常方便的缩放功能:

var editor = new ImageEditor;
// 将图片缩放到300x300
// drawImage支持5个参数:图片对象,及图片在canvas上的坐标和宽高
editor.context.drawImage(squareImage, 0, 0, 300, 300);

然而大尺寸图片直接用drawImage进行缩小处理会导致图片出现锯齿。在stack
overflow上HTML5 canvas drawImage: how to apply
antialiasing提出了一个方案:对图片进行若干次的等比例缩小,最后再放大到目标尺寸:

奥门新浦京官方网站 1

参考这个方案,我们可以实现antialiasScale抗锯齿缩放函数:

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);
};

我们可以用这个函数代替drawImage完成缩放工作,生成头像图片的三种尺寸:

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);
    });
};

奥门新浦京官方网站 2

PHP存储base64图片数据

Canvas.toDataURL()获取的默认图像数据格式是:data:image/png;base64, +
base64数据:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC

当把Canvas截屏数据传给后台时,后台需要截断开头的字段data:image/png;base64,,获取后面那串真正的base64数据:

<?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));

1608e1bbc22cf937.gif

参考

  • Save a Base64 Encoded Canvas image to a png file using
    PHP
  • Html5 canvas drawImage: how to apply
    antialiasing
  • Maximum size of a canvas
    element
  • How to save a PNG image server-side, from a base64 data
    string
  • How to send FormData objects with Ajax-requests in
    jQuery

思路

1.获取用户头像

wx.getUserInfo({
    success: function(res) {
        var userInfo = res.userInfo
        var avatarUrl = userInfo.avatarUrl
  }
})

这里有个问题需要注意,canvas不支持网络图片,上面获取的只是头像图片地址,所以在这里要把图片下载到微信的临时目录。代码如下:

wx.downloadFile({   
    url: userInfo.avatarUrl, 
    success: function (res) {    
        if (res.statusCode === 200) {      
            avatarUrl = res.tempFilePath //这里的地址是指向本地图片 
        }     
    }  
})

获取头像这一步用的是微信现成的API 比较方便。


2.绘制用户头像

此处封装了常用的方法,下方avatarImg.w和avatarImg.h是指头像的大小。

drawAvatar: function (img) {
    ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)
}

绘制图片使用drawImage函数


3.绘制帽子

绘制帽子之前,我定义了一个对象object来保存帽子的参数

var hat = { 
    url: "../res/hat01.png", 
    w: 40,  
    h: 40,  
    x: 100, 
    y: 100, 
    b: 1,//缩放的倍率
    rotate: 0//旋转的角度
}

接下来开始绘制帽子

drawHat: function (hat) { 
    ctx.translate(hat.x, hat.y) 
    ctx.scale(hat.b, hat.b) 
    ctx.rotate(hat.rotate * Math.PI / 180)
    ctx.translate(-hat.x, -hat.y) 
    ctx.drawImage(hat.url, hat.x - hat.w / 2, hat.y - hat.h / 2, hat.w, hat.h) 
}

这里要稍微解释下,都是以帽子的中心点为原点进行缩放、旋转。
如果初始化Canvas原点坐标在canvas的左上角(0,0),translate之后原点坐标相当于(0

  • hat.x , 0 + hat.y)。
    之后针对(0 + hat.x , 0+hat.y)这个坐标进行scale和rotate

    ctx.translate(hat.x, hat.y)

    ctx.scale(hat.b, hat.b)
    ctx.rotate(hat.rotate * Math.PI / 180)

下一步将原点坐标退回到初始化状态、相当于(0 + hat.x – hat.x , 0 + hat.y
-hat.y),原点坐标自然回到Canvas左上角(0,0)。

ctx.translate(-hat.x, -hat.y) 

还有一个问题,当以触摸点(e.touches[0].x,e.touches[0].x)绘制hat时,hat会一直触摸点的右下方,而不是hat的中心,所以利用下方代码将hat中心点移到触摸点。

ctx.drawImage(hat.url, hat.x - hat.w / 2, hat.y - hat.h / 2, hat.w, hat.h) 

示意图如下:

奥门新浦京官方网站 3

1.jpg

奥门新浦京官方网站 4

2.jpg


4.改变帽子的参数

移动帽子:

 moveHat: function (e) { 
     hat.x = e.touches[0].x
     hat.y = e.touches[0].y 
     that.drawA() 
 }

旋转帽子:

 rotateHat: function (e) {  
     hat.rotate = e.detail.value    //这一块偷懒了,用slider组件 ,滑动取值
     that.drawA() 
 }

缩放帽子:

scaleHat: function (e) {  
     hat.b = e.detail.value   
     hat.w = 40 * hat.b    
     hat.h = 40 * hat.b    
     that.drawA()    ////此处用slider组件 ,滑动取值 
}

改变帽子样式:

changeHat: function (e) {
    hat.url = e.currentTarget.dataset.url  //改变帽子的样式   
    that.drawA() 
}

这几个方法中都有drawA(),这主要是每一次移动、旋转、缩放、改变参数时重绘画布。


5.Canvas导出图片

微信官方有提供相应API

saveToPhoto: function () {
    wx.canvasToTempFilePath({  
        x: 0,
        y: 0,
        width: 240,
        height: 240,
        destWidth: 240,
        destHeight: 240,
        canvasId: 'ctx',
        success: function (res) {
            //canvas转图片成功回调
        }
    })
}

最后保存到相册

wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
}) 
wx.showToast({title: '保存成功'})

基本上一个圣诞帽小程序就是这么个思路,当然还有其他方法~


以上代码没做相关优化,写的比较糙,把我的思路写出来给大家看看,共同成长!
一个射鸡狮的不归之路~

发表评论

电子邮件地址不会被公开。 必填项已用*标注