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.  a ndroid 老的原生 手机浏览器  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.");                     }                 });             }