RESIZING AND CROPPING IMAGES WITH CANVAS

    Rating: ★★★★☆
    View: 157
    Download: 134
    Từ khóa:

    In this tutorial we’re going to learn how to resize and crop an image using the HTML5 element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications.

    In a real world example a website or app might use a technique like this to resize and frame a profile picture before uploading. Whilst we could do this on the server, it would require the transfer of a potentially large file, which is slow. Instead we can resize the image on the client side before uploading it, which is fast.

    We do this by creating an HTML5  element and drawing the image to the canvas at a particular size, then extracting the new image data from the canvas as a data URI. Most browsers have good support for these methods, so you can probably use this technique right now, however just be aware of some limitations unrelated to browser support such as quality and performance.

    Resizing very large images can cause the browser to slow down or in some cases, even crash. It makes sense to set reasonable limits on the file size just as you would when uploading a file. If quality is important you may find the resized image looks undesirable due to how the browser resampled it. There are some techniques to improve the quality of images downscaled with canvas, but they are not covered in this tutorial.

    THE MARKUP

    In our demo we’re going to start with an existing image:

    Image

    THE CSS

    The CSS is also very minimal. First, define the styles for the resize-container and the image.

    .resize-container {
        position: relative;
        display: inline-block;
        cursor: move;
        margin: 0 auto;
    }
     
    .resize-container img {
        display: block
    }
     
    .resize-container:hover img,
    .resize-container:active img {
        outline: 2px dashed rgba(222,60,80,.9);
    }

    Next, define the position and style for each of the ‘resize handles’. These are the little squares at each corner of the image that we drag to resize.

    .resize-handle-ne,
    .resize-handle-ne,
    .resize-handle-se,
    .resize-handle-nw,
    .resize-handle-sw {
        position: absolute;
        display: block;
        width: 10px;
        height: 10px;
        background: rgba(222,60,80,.9);
        z-index: 999;
    }
     
    .resize-handle-nw {
        top: -5px;
        left: -5px;
        cursor: nw-resize;
    }
     
    .resize-handle-sw {
        bottom: -5px;
        left: -5px;
        cursor: sw-resize;
    }
     
    .resize-handle-ne {
        top: -5px;
        right: -5px;
        cursor: ne-resize;
    }
     
    .resize-handle-se {
        bottom: -5px;
        right: -5px;
        cursor: se-resize;
    }

    THE JAVASCRIPT

    With the JavaScript start by defining some of the variables and initializing the Canvas and the target image.

    var resizeableImage = function(image_target) {
        var $container,
        orig_src = new Image(),
        image_target = $(image_target).get(0),
        event_state = {},
        constrain = false,
        min_width = 60,
        min_height = 60,
        max_width = 800,
        max_height = 900,
        resize_canvas = document.createElement('canvas');
    });
     
    resizeableImage($('.resize-image'));
    Next, we create the init function that will be called immediately. This function wraps the image with a container, creates resize handles and makes a copy of the original image used for resizing. We also assign the jQuery object for the container element to a variable so we can refer to it later and add a mousedown event listener to detect when someone begins dragging one of the handles.
    var resizeableImage = function(image_target) {
     
    // ...
        init = function(){
     
            // Create a new image with a copy of the original src
            // When resizing, we will always use this original copy as the base
            orig_src.src=image_target.src;
     
            // Add resize handles
            $(image_target).wrap('
    ') .before('') .before('') .after('') .after(''); // Get a variable for the container $container = $(image_target).parent('.resize-container'); // Add events $container.on('mousedown', '.resize-handle', startResize); }; //... init(); } The startResize and endResize functions do very little other than tell the browser to start paying attention to where the mouse is moving and when to stop paying attention. startResize = function(e){ e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on('mousemove', resizing); $(document).on('mouseup', endResize); }; endResize = function(e){ e.preventDefault(); $(document).off('mouseup touchend', endResize); $(document).off('mousemove touchmove', resizing); }; Before we start tracking the mouse position we want to take a snapshot of the container dimensions and other key data points. We store these in a variable named event_state and use them later as a point of reference while resizing to work out the change in height and width. saveEventState = function(e){ // Save the initial event details and container state event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset().left; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX
    loading Đang tải...

    template được ưa chuộng