>source

추신:조사 유형의 질문이 아닙니까! 나는 아주 오래전부터 이것을 하려고 노력해왔다.

다음과 같이 사용자가 여러 자르기 영역을 선택하고 선택 후 모든 이미지 영역을 저장/다운로드할 수 있는 웹 기반 이미지 편집기를 만들려고 합니다.

현재 두 개의 라이브러리를 발견했습니다.

1.Cropper.JS는 단일 선택 기능만 사용할 수 있습니다.

2.Jcrop단 하나의 선택 영역만 제한됩니다.

저는 현재 cropper.Js를 사용하고 있지만 다중 선택 자르기를 수행하는 것이 불가능한 것 같습니다. 한 번에 여러 자르기 선택을 위해 Angular 또는 PHP 또는 reactJS에서 사용할 수 있는 다른 방법/라이브러리가 있으면 도움을 주시면 감사하겠습니다.

Jcrop.attach('대상',{ multi: true }); Jcrop 문서에서: jcrop.com/guide/#setting-options. 그리고 Jcrop 예제에서: jcrop.com/examples/custom-widget.html

keyhan2022-02-14 12:03:12

@keyhan 이미 시도했지만 여러 자르기 이미지 영역을 내보내는 옵션이 없습니다. 질문 문제 및 오류가 발생한 위치에 이미 붙여넣었습니다.

archana2022-02-14 13:27:49

자른 영역의 x, y, 너비 및 높이가 있으므로 임시 캔버스 w3schools.com/tags/canvas_drawimage.asp에 각각을 그리고 마지막으로 canvas.toDataURL()을 사용하여 캔버스를 에 저장하고 제공할 수 있습니다. .

keyhan2022-02-14 15:21:58
  • 답변 # 1

    코멘트로 code를 설명하려고 했습니다.

    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();
            }
        }
    };
    

  • 이전 plugins : Minecraft Server Paper player.set 리소스 팩이 작동하지 않습니다.
  • 다음 javascript : Vue 테스트에서 컴포넌트가 표시되는지 확인하는 방법