javascript - jquery截取当前页面

Question

现在有如下需求：

有一张图片，我想截取当前图片的某一部分，然后获取新截取的图片的文件名，并添加到某个p中，请问该如何实现。。。我查了一下，大概都是用canvas或者一些jquery插件，那些插件都是从本地选择一张图片再截取，有没有什么方法可以直接从页面截取呢。。

Answer 1

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";

Answer 2

这个过程是需要多个技术共同完成的
1.js截取图片插架加 ajax上传服务器 并返回图片地址（服务端需要动态语言接受并存储）
2.将回调的图片地址显示在页面中

Answer 3

其实本地选择一张图片截取和页面选择一张图片截取差不多，都要把图片对象获取到，然后，如果是真正的截取的话，就必须用到canvas，如果只是看上去像是截取了，可以用<img>加<p>或者用背景图片展示出来。

Answer 4

看下 html2canvas