使用HTML5+Canvas调用IPHONE摄像头拍照并压缩处理

林氏智造 于 2014-06-06 发布 43545 人已阅

用到的HTML5标签

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput"  class="sign_file"/>

注意:capture="camera"属性只有在iphone里面的浏览器才能识别出摄像头,安卓系列手机有些内置的浏览器可以,不过大多都不行。

等比缩放图片

function drawOnCanvas(file) {
  var reader = new FileReader();

  reader.onload = function (e) {
    var dataURL = e.target.result,
        canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image();
         img.onload = function() {
             var square = 320;
            canvas.width = square;
            canvas.height = square;
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, square, square);
            var imageWidth;
            var imageHeight;
            var offsetX = 0;
            var offsetY = 0;
            if (this.width > this.height) {
                imageWidth = Math.round(square * this.width / this.height);
                imageHeight = square;
                offsetX = - Math.round((imageWidth - square) / 2);
            } else {
                imageHeight = Math.round(square * this.height / this.width);
                imageWidth = square;
                offsetY = - Math.round((imageHeight - square) / 2);
            }
             context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
             var base64 = canvas.toDataURL('image/jpeg',0.5);
             $('#j_thumb').val(base64.substr(22));
        };
        img.src = dataURL;
    };

  reader.readAsDataURL(file);
}

FileReader对象是用来解析file控件获取的本地图片地址的,具体介绍请百度一下。把解析好的地址设置给IMG标签的SRC属性,然后通过canvas对象把图片绘制; 在这过程中就有个等比缩放的算法,再用drawImage方法把图像画到canvas中。

如何获取画好的图片数据传到后端处理

通过 canvas.toDataURL('image/jpeg',0.5)就可以获取到base64编码值,然后你就可以按照传统的POST或者AJAX方式处理了。

让图片显示

document.querySelector('input[type=file]').onchange = function () {
  var file = input.files[0];
  drawOnCanvas(file);
};

后台处理方式

$base64 = $_POST['formFile'];
$IMG = base64_decode( $base64 );
file_put_contents('1.png', $IMG );

与传统的上传图片不同,这时候后台需要用base64_decode解码

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

React+webpack 部署概要

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

gulp前端自动化部署方案

gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快