Web端本地用canvas裁剪图片相关问题

借用的是Jcrop插件（依托jquery）来获得要裁剪图片的左上角坐标，高，宽，再用canvas重绘之后通过append添加到dom的方法。

1，在body里设置一张图片

<img class="my" id="element_id" src="./view.jpg">

2，设置要获得坐标的隐藏域input

<input type='hidden' id='x' name='x'/>//左上角x
<input type='hidden' id='x2' name='x2'/>//右下角x
<input type='hidden' id='y' name='y'/>左上角y
<input type='hidden' id='y2' name='y2'/>//右下角y
<input type='hidden' id='w' name='w'/>宽
<input type='hidden' id='h' name='h'/>高

备注：用canvas画的话可以省略右下角的坐标，也就是右下角x右下角y这两个参数。

3，引入jquery，Jcrop插件

<script src="./jquery.min.js"></script>
<script src="./jquery.Jcrop.js"></script>

4，调用Jcrop执行函数

$('#element_id').Jcrop({
   allowSelect: true,     //允许新选框
    allowMove: true,   //允许选框移动
    allowResize: true,    //允许选框缩放
    aspectRatio: 16 / 9,//图片的宽高比
    setSelect: [0, 0, 100, 100],//起始的坐标和高宽
    onSelect: drawHandleImg,//要执行的函数
});

备注：element_id为对应的图片dom元素的id。

//执行函数
function drawHandleImg(coords) {
    console.log(coords.w)
    var url = "./view.jpg";//这是站内的一张图片资源，采用的相对路径
    var img = new Image();
    img.src = url;
    var canvas = $('<canvas width="' + coords.w + '" height="' + coords.h + '"></canvas>')[0];
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, coords.x, coords.y, coords.w, coords.h, 0, 0, coords.w, coords.h);//重绘
    $(document.body).append(canvas);//添加到文档中可以查看效果
}

以上代码只能实现在本地浏览器内显示要裁剪后的图片的样子，那么如何读取文件之后再裁剪呢，因为JavaScript不能直接操作文件，因此需要通过input的File API来处理，代码如下：

$('input[type=file]').change(function(){
    var file=this.files[0];
    var reader=new FileReader();
    reader.onload=function(){
        // 通过 reader.result 来访问生成的 DataURL
        var url=reader.result;
        console.log(url)
    };
    reader.readAsDataURL(file);
});

备注：生成的url地址的格式是base64的。
这时候再通过canvas裁剪重绘图片。我们要获取 canvas 中图片的信息，因为用canvas重新绘制的图片是img，要重新转换成base64格式的，这时候要通过canvas的API， toDataURL 转换成base64 , 然后取出信息，再用 window.atob 转换成由二进制字符串,因为是字符串的关系，直接给 Blob的话还是会出错。所以又要用 Uint8Array 转换一下。

var data=canvas.toDataURL();
data=data.split(',')[1];
data=window.atob(data);
var uaArray= new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
    uaArray [i] = data.charCodeAt(i);//返回指定位置的字符的 Unicode 编码
};
// canvas.toDataURL 返回的默认格式就是 image/png
var blob=new Blob([uaArray], {type:"image/png"});

这时候将blob数据发送至后台，后台可以将Blob格式的数据转换成image保存就可以了。

后记：生成base64格式的还有一种方法是通过canvas的API，toDataURL来实现，代码如下：

//实现将项目的图片转化成base64
function convertImgToBase64(url, callback, outputFormat) {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image;
    img.src = url;
    img.crossOrigin = 'Anonymous';
    img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        canvas = null;
    };