JavaScript:一张图像中的多重裁剪选择？

Question

PS:这不是研究型的问题吗!很长一段时间以来，我一直在尝试这样做。

我正在尝试制作基于网络的图像编辑器，用户可以在其中选择多个裁剪区域，并在选择后保存/下载所有图像区域。如下所示。

到目前为止，我发现了两个库

1.Cropper.JS只有单选功能可用。

2.Jcrop这里只有单选区域限制。

我目前正在使用 cropper.Js，但我似乎无法进行多选裁剪。 非常感谢任何帮助。如果 JavaScript、Angular 或 PHP 或 reactJS 中有任何其他方法/库可用于多个图像区域选择和裁剪并一次性下载，如下图所示。

As per @Keyhan Answer I am Updating my Jcrop library Code

 <div style="padding:0 5%;">
   <img id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">
 </div> 

 <button id="save">Crop it!</button>

<link rel="stylesheet" href="https://unpkg.com/jcrop/dist/jcrop.css">
<script src="https://unpkg.com/jcrop"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

JavaScript

    <script>


    setImage();
    var jcp;
    var jcp;
    Jcrop.load('target').then(img => {
        //You can enable multiple cropping with this line:
        jcp = Jcrop.attach(img, { multi: true });
    });

    // to fix security issue when trying to convert to Data URI
    function setImage() {
        document.getElementById('target').setAttribute('crossOrigin', 'anonymous');
        document.getElementById('target').src = 'https://d3o1694hluedf9.cloudfront.net/market-750.jpg';
    } 


    var link = document.getElementById('save');
    link.onclick = function () {
        //we check if at least one crop is available
        if (jcp.active) {
            var i = 0;
            var fullImg = document.getElementById("target");
            //we are looping cropped areas
            for (area of jcp.crops) {
                i++;
                //creating temp canvas and drawing cropped area on it
                canvas = document.createElement("canvas");
                canvas.setAttribute('width', area.pos.w);
                canvas.setAttribute('height', area.pos.h);
                ctx = canvas.getContext("2d");
                ctx.drawImage(fullImg, area.pos.x, area.pos.y, area.pos.w, area.pos.h, 0, 0, area.pos.w, area.pos.h);
                //creating temp link for saving/serving new image
                temp = document.createElement('a');
                temp.setAttribute('download', 'area' + i + '.jpg');
                temp.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"));
                temp.click();
            }
        }
    };

</script>

Answer 1

我试着用注释来解释代码:

var jcp;
    Jcrop.load('target').then(img => {
    //You can enable multiple cropping with this line:
    jcp = Jcrop.attach(img,{multi:true});
});
//assuming you have a button with id="save" for exporting cropped areas
var link=document.getElementById('save');
link.onclick = function(){
    //we check if at least one crop is available
    if(jcp.active){
        var i=0;
        var fullImg = document.getElementById("target");
        //we are looping cropped areas 
        for(area of jcp.crops){
            i++;
            //creating temp canvas and drawing cropped area on it
            canvas = document.createElement("canvas");
            canvas.setAttribute('width',area.pos.w);
            canvas.setAttribute('height',area.pos.h);
            ctx = canvas.getContext("2d");
            ctx.drawImage(fullImg, area.pos.x, area.pos.y, area.pos.w, area.pos.h, 0, 0, area.pos.w, area.pos.h);
            //creating temp link for saving/serving new image
            temp = document.createElement('a');
            temp.setAttribute('download', 'area'+i+'.jpg');
            temp.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"));    
            temp.click();
        }
    }
};

编辑:正如您所说，如果我们有本地镜像加载器会更好，我们可以将文件输入添加到我们的 html

<img id="target" />
<br/>
<input type="file" id="imageLoader" name="imageLoader"/><!-- add this for file picker -->
<button id="save">save</button>

和我们的js函数来处理它

var jcp;
var save=document.getElementById('save');
var imageLoader = document.getElementById('imageLoader');
var img = document.getElementById("target");
imageLoader.onchange=function handleImage(e){//handling our image picker <input>:
    var reader = new FileReader();
    reader.onload = function(event){
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}
save.onclick = function(){
    if(jcp&&jcp.active){
        var i=0;
        for(area of jcp.crops){
            i++;
            canvas = document.createElement("canvas");
            canvas.setAttribute('width',area.pos.w);
            canvas.setAttribute('height',area.pos.h);
            ctx = canvas.getContext("2d");
            ctx.drawImage(img, area.pos.x, area.pos.y, area.pos.w, area.pos.h, 0, 0, area.pos.w, area.pos.h);
            temp = document.createElement('a');
            temp.setAttribute('download', 'area'+i+'.jpg');
            temp.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"));    
            temp.click();
        }
    }
};
Jcrop.load('target').then(img => {
    jcp = Jcrop.attach(img,{multi:true});
});