jquery截取当前页面

canvas 可以根据图片路径来进行操作。 这里我简单列举两种方法，还有其他方法，大致思路就是图片路径转成base64 或blob, 加载到canvas对象中去操作，裁剪压缩都可以。 当然也可以用牛人封装好的第三方类库去操作。

方法1：直接加载图片路径
可以参考使用这个第三方工具 javascript-load-image
实际使用过，还是比较好用

            //图片压缩并且展示
            function imageresizeAndPreview(path, orientation) {
                loadImage(
                    path,
                    function(img) {
                        //img为得到的html Image对象
                        if (img.type === "error") {
                            console.log("Error loading image " + imageUrl);
                        } else {
                            //对img进行一些操作
                            var li = document.createElement("li");
                            li.appendChild(img);
                        }
                    }, {
                        maxWidth: 60,
                        maxHeight: 60,
                        crop: true,
                        orientation: orientation
                    }
                );
            }

方法2
把图片转成base64再加载，然后再进行操作

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};
image.src = "data:image/  png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";