megapix-image插件 使用Canvas压缩图片上传 MegaPixImage.js下载

    
    
    
    
        function sendImage() {
            // 获取 canvas DOM 对象  
            var canvas = document.getElementById("myCanvas");
            // 获取Base64编码后的图像数据，格式是字符串  
            // "data:image/png;base64,"开头,需要在客户端或者服务器端将其去掉，后面的部分可以直接写入文件。  
            var dataurl = canvas.toDataURL("image/png");
            // 为安全 对URI进行编码  
            // data%3Aimage%2Fpng%3Bbase64%2C 开头  
            var imagedata = encodeURIComponent(dataurl);
            //imagedata = imagedata.replace('data:image/png;base64,', '');
            var url = "/APPCommon/SavePostCanvasImage";

            // 因为是string，所以服务器需要对数据进行转码，写文件操作等。  
            // 个人约定，所有http参数名字全部小写  
            console.log(dataurl);
            console.log(imagedata);
            var data = {
                imagename: "myImage.png",
                imagedata: imagedata
            };
            jQuery.ajax({
                url: url,
                data: data,
                type: "POST",
                // 期待的返回值类型  
                dataType: "json",
                complete: function (xhr, result) {
                    console.log(xhr.responseText);
                    var $tip2 = $("#tip2");
                    if (!xhr) {
                        $tip2.text('网络连接失败!');
                        return false;
                    }

                    var text = xhr.responseText;
                    if (!text) {
                        $tip2.text('网络错误!');
                        return false;
                    }

                    var json = eval（"(" + text + ")");
                    if (!json) {
                        $tip2.text('解析错误!');
                        return false;
                    } else {
                        $tip2.text(json.Result);
                    }
                }
            });
        };
    


    

        
        
        上 传
        

            
            
        
    
    

        var fileInput = document.getElementById('cameraInput');
        fileInput.onchange = function () {
            var file = fileInput.files[0];
            var mpImg = new MegaPixImage(file);

            var resCanvas1 = document.getElementById('myCanvas');
            var _max = 320;
            mpImg.render(resCanvas1, {
                maxHeight: _max
            });
            //            var resCanvas2 = document.getElementById('resultCanvas2');
            //            mpImg.render(resCanvas2, {
            //                maxWidth: 300,
            //                maxHeight: 300,
            //                orientation: 6
            //            });
        };
    

/**
* Mega pixel image rendering library for iOS6 Safari
*
* Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel),
* which causes unexpected subsampling when drawing it in canvas.
* By using this library, you can safely render the image with proper stretching.
*
* Copyright (c) 2012 Shinichi Tomita 
* Released under the MIT license
*/
(function () {

    /**
    * Detect subsampling in loaded image.
    * In iOS, larger images than 2M pixels may be subsampled in rendering.
    */
    function detectSubsampling(img) {
        var iw = img.naturalWidth, ih = img.naturalHeight;
        if (iw * ih > 1024 * 1024) { // subsampling may happen over megapixel image
            var canvas = document.createElement('canvas');
            canvas.width = canvas.height = 1;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, -iw + 1, 0);
            // subsampled image becomes half smaller in rendering size.
            // check alpha channel value to confirm image is covering edge pixel or not.
            // if alpha value is 0 image is not covering, hence subsampled.
            return ctx.getImageData(0, 0, 1, 1).data[3] === 0;
        } else {
            return false;
        }
    }

    /**
    * Detecting vertical squash in loaded image.
    * Fixes a bug which squash image vertically while drawing into canvas for some images.
    */
    function detectVerticalSquash(img, iw, ih) {
        var canvas = document.createElement('canvas');
        canvas.width = 1;
        canvas.height = ih;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        var data = ctx.getImageData(0, 0, 1, ih).data;
        // search image edge pixel position in case it is squashed vertically.
        var sy = 0;
        var ey = ih;
        var py = ih;
        while (py > sy) {
            var alpha = data[(py - 1) * 4 + 3];
            if (alpha === 0) {
                ey = py;
            } else {
                sy = py;
            }
            py = (ey + sy) >> 1;
        }
        var ratio = (py / ih);
        return (ratio === 0) ? 1 : ratio;
    }

    /**
    * Rendering image element (with resizing) and get its data URL
    */
    function renderImageToDataURL(img, options, doSquash) {
        var canvas = document.createElement('canvas');
        renderImageToCanvas(img, canvas, options, doSquash);
        return canvas.toDataURL("image/jpeg", options.quality || 0.8);
    }

    /**
    * Rendering image element (with resizing) into the canvas element
    */
    function renderImageToCanvas(img, canvas, options, doSquash) {
        var iw = img.naturalWidth, ih = img.naturalHeight;
        var width = options.width, height = options.height;
        var ctx = canvas.getContext('2d');
        ctx.save();
        transformCoordinate(canvas, ctx, width, height, options.orientation);
        var subsampled = detectSubsampling(img);
        if (subsampled) {
            iw /= 2;
            ih /= 2;
        }
        var d = 1024; // size of tiling canvas
        var tmpCanvas = document.createElement('canvas');
        tmpCanvas.width = tmpCanvas.height = d;
        var tmpCtx = tmpCanvas.getContext('2d');
        var vertSquashRatio = doSquash ? detectVerticalSquash(img, iw, ih) : 1;
        var dw = Math.ceil(d * width / iw);
        var dh = Math.ceil(d * height / ih / vertSquashRatio);
        var sy = 0;
        var dy = 0;
        while (sy  maxWidth) {
            width = maxWidth;
            height = (imgHeight * width / imgWidth)  maxHeight) {
            height = maxHeight;
            width = (imgWidth * height / imgHeight)