Javascript를 사용하여 45도 각도로 이미지를자를 수 있습니까?

-2

기본적으로 이미지의 크기를 줄이고 삼각형이되도록 잘라야합니다. 어떻게 자바 스크립트를 사용 하여이 작업을 수행 할 것이라고? Javascript를 사용하여 45도 각도로 이미지를자를 수 있습니까?

enter image description here

이

은 내가 무엇을 달성하기 위해 찾고 있어요 (분명히 직선이 될 것입니다,하지만 그건 내가 페인트에서 할 수있는 최선의 방법) 약 : 여기

enter image description here

코드입니다 지금까지이 : HTML : <div id = "mydiv"></div> 자바 스크립트 :

document.getElementById("mydiv").onclick = moulding_change('5f52a13c425655fa62058418542b95ca'); 

function moulding_change(thumb) 
{ 

var ppi = 15; 

var SITE_URL = "http://www.asa.tframes.org:1881"; 

    var img = new Image(); 
    img.src = SITE_URL + '/system/components/compimg/' + thumb + '/pattern'; 
    img.onload = function() { 
    console.log("width before " + this.width); 
    //width needs to be the same as the height (in this case 450) 
    img.width = img.height/ppi; 
    //img.width = img.height; 
    img.height /= ppi; 
    console.log("width after " + this.width); 
    var canvas = document.createElement('canvas'); 
    var ctx = canvas.getContext("2d"); 
    canvas.style.position = "absolute"; 
    canvas.style.zIndex = 5; 
    canvas.style.width = "1000px"; 
    canvas.style.height = "1000px"; 
     // Save the state, so we can undo the clipping 
    ctx.save(); 

    // Create a shape, of some sort 
    ctx.beginPath(); 
    ctx.moveTo(0,0); 
    ctx.lineTo(img.width,0); 
    ctx.lineTo(img.width,img.width); 

    ctx.closePath(); 
    // Clip to the current path 
    ctx.clip(); 

    ctx.drawImage(img, 0, 0); 

    // Undo the clipping 
    ctx.restore(); 
    $("#mydiv").append(canvas); 
    }; 
}

출처

2014-04-09 AllisonC

아직 시도해 보셨나요? 캔버스를 사용하는 – j08691

은 imho로가는 길입니다. 그것은 CSS로 할 수 있지만 그곳에는 고통이 될 것입니다. –

왜 이것을 자바 스크립트로 할 필요가 있습니까? (CSS 사용 반대, 서버 측에서)? 이미지는 어디에서 왔는가? (사용자가 업로드 한, 서버에서 동적으로 생성 된)? 나중에 저장해야합니까, 아니면 디스플레이 목적으로 만 사용합니까? –

Geoff 덕택에 캔버스 요소를 만들 수있었습니다. 문제는 내가 이미지의 너비와 높이를 지정하지 않는다는 것이 었습니다.

출처

2014-04-10 15:58:12 AllisonC

Javascript를 사용하여 45도 각도로 이미지를자를 수 있습니까?

답변

관련 문제