Web 本地图片 canvas 截取上传

我作了一个 Web 本地图片 canvas 截取上传 的demo。发现了几个问题，记录下：

1.  Canvas 元素大小 (css width height) 和表面大小(canvas 自身的 width height 属性）两个概念是不同的，当两个大小不一致时，坐标须要进行转换计算。

 

// 其中 x, y 是视口坐标            
function windowToCanvas(canvas, x, y) {
                var bbox = canvas.getBoundingClientRect();
                return { x: (x - bbox.left) * (canvas.width  / bbox.width),
                    y: (y - bbox.top)  * (canvas.height / bbox.height)
                };
            }

 

2. android 老的原生手机浏览器 Blob 构造函数有bug （好比使用微信或qq浏览器, new Blob() 会抛出异常）， 个人解决方法是使用 base64 上传，服务端解码。因为base64大小为原来的4/3倍，天然会想能不能像c语言那样接把字符看成unsigned char来看待。仔细一想 js 是不行的。因text+=1，数字1将被转换为字符串"1"，而text[i]是仅可读，不修改！

 

            var clearWidth, clearHeight;
            var imageLoaded = false;
            var cutPoint = {x:0, y:0};
            var gFileName = "";

            document.getElementById('uploadbtn').onclick = function(){
                if(!imageLoaded){
                    return;
                }

                var originalCanvas = document.getElementById('original');
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.width = clearWidth;
                canvas.height = clearHeight;
                context.drawImage(originalCanvas, cutPoint.x, cutPoint.y, clearWidth, clearHeight, 0, 0, clearWidth, clearHeight);

                // 注意  toDataURL 返回的默认是 png 格式
                // data 是 base64 编码
                var data = canvas.toDataURL();
                // 第二个参数的值若是在0.0和1.0之间的话, 会被看做是图片质量参数
                // 可是我测试大小没什么变化
                //var data = canvas.toDataURL('image/png', 0.5);

                var encodeData = data.split(',')[1];
                // 解 base64 编码
                var decodedData = window.atob(encodeData);
                var ia = new Uint8Array(decodedData.length);
                for (var i = 0; i < decodedData.length; i++) {
                    ia[i] = decodedData.charCodeAt(i);
                };

                var blob;
                try{
                    // toDataURL 返回的默认是 png 格式，因此这里固定为 image/png
                    blob = new Blob([ia], {type:"image/png"});
                }catch(e){
                    // 使用 http://haomou.net/2016/01/14/2016_android_blob/ 仍然没法解决
                    // android 手机浏览器 Blob 构造函数 bug
                    // 个人解决方法是使用 base64 上传，服务端解码

//                    alert("new Blob exception:" + e);
//                    // TypeError old chrome and FF
//                    var BlobBuilder = window.BlobBuilder ||
//                            window.WebKitBlobBuilder ||
//                            window.MozBlobBuilder ||
//                            window.MSBlobBuilder;
//
//                    alert("BlobBuilder:" + typeof(BlobBuilder));
//                    if(e.name == 'TypeError' && BlobBuilder){
//                        var bb = new BlobBuilder();
//                        bb.append([ia.buffer]);
//                        blob = bb.getBlob("image/png");
//                    } else if(e.name == "InvalidStateError"){
//                        // InvalidStateError (tested on FF13 WinXP)
//                        blob = new Blob( [ia.buffer], {type : "image/png"});
//                    }
//                    else{
//                        // We're screwed, blob constructor unsupported entirely
//                        alert("blob constructor unsupported entirely");
//                        return;
//                    }
                }

                // 修改文件名后缀格式
                var filename = gFileName;
                var index = filename.lastIndexOf('.');
                if(index >= 0){
                    filename = filename.substring(0, index);
                    filename += ".png";
                }

                var fd = new FormData();
                if(blob){
                    fd.append('image', blob, filename);
                }else{
                    // 采用 base64 上传
                    fd.append("filename", filename);
                    fd.append("image", encodeData);

                    // 因为 base64 大小为原来的 4/3 倍，天然会想能不能像 c 语言那样
                    // 直接把字符看成 unsigned char 来看待。js 是不行的。由于
                    // text += 1 ，数字1将被转换为字符串"1" ，而 text[i] 是仅可读，不
                    // 可修改！
                }

                // 使用 ajax 发送
                $.ajax({
                    url:"http://192.168.3.102:8080/upload",
                    type:"POST",
                    data:fd,
                    processData: false,  // 告诉jQuery不要去处理发送的数据
                    contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
                    success:function() {
                        console.log("post success.");
                    },
                    error: function(){
                        console.log("post failed.");
                    }
                });
            }