Graph changes based on Raphael

Has the following features:

Drag: drag to the desired position within a certain range
Resize: You can adjust the canvas size and image size.
Rotation: rotate based on the input angle
Fit image:
Select the most appropriate size based on the size of the canvas for scaling. However, the image proportion remains unchanged.
Fit width: Adjust the image according to the canvas size, but the image proportion remains unchanged.

Fit height: Adjust the Image Based on the canvas size, but the image proportion remains unchanged.

Customize: resize the image based on the size of the canvas.

Actual size: The image size remains unchanged. Change the canvas size.

Note: Raphael and the drag and resize JavaScript downloaded online are used.
Once again, only the self-written JS Code is provided:
Image. js
$ (Document). Ready (function (){
VaR canvans_width = 300,
Canvans_height = 200,
Image_width = $ ("# rimg"). Width (),
Image_height = $ ("# rimg"). Height (),
Ration_r = image_width/image_height;

$ ("# Selectarea" ).css ({
Background: "#888888 ",
Width: canvans_width,
Height: canvans_height
});

VaR paper = Raphael ("selectarea", canvans_width, canvans_height ),
Image = paper. Image ("./image/gg.bmp", 0, 0, image_width, image_height );

$ ("# OK"). Click (function (){
Paper. setsize ($ ("# selectarea"). Width (), $ ("# selectarea"). Height ());
Pic_select = $ ("# picselect"). Val ();
Degree = $ ("# degree"). Val ();
Image. Rotate (degree );
If (pic_select = "customize "){
Image. ATTR ({
Width: $ ("# selectarea"). Width (),
Height: $ ("# selectarea"). Height ()
});
}
If (pic_select = "actual size "){
Image. ATTR ({
Width: image_width,
Height: image_height
});
}
If (pic_select = "Fit image "){
VaR ration = $ ("# selectarea"). Width ()/$ ("# selectarea"). Height ();
If (ration_r> ration ){
Image. ATTR ({
Width: $ ("# selectarea"). Width (),
Height: $ ("# selectarea"). Width ()/ration_r
});
}
Else {
Image. ATTR ({
Width: $ ("# selectarea"). Height () * ration_r,
Height: $ ("# selectarea"). Height ()
});
}
}
If (pic_select = "Fit width "){
Image. ATTR ({
Width: $ ("# selectarea"). Width (),
Height: $ ("# selectarea"). Width ()/ration_r
});
}
If (pic_select = "Fit height "){
Image. ATTR ({
Width: $ ("# selectarea"). Height () * ration_r,
Height: $ ("# selectarea"). Height ()
});
}
});
});

Shows the HTML code.