Jquery crop using canvas not working

Question

Hi Given below is my code. Its just one html file. I am trying to crop an image with a box. But when i draw it to canvas resolutions are all coming wrong. Please help.

I need to cut the portion of the image where the box lies.

    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style>
body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

#container {
    width: 100%;
    height: 100%;
    position: fixed;
}

.cover-container {
    display: table;
    height: 315px;
    margin: 5% auto 0;
    width: 90%;
    position: relative;
}

#camera {
    height: 100%;
    position: fixed;
    width: 100%;
}

#camera2 {
    height: 100%;
    position: fixed;
    width: 100%;
}

#cover {
    display: block;
    height: 315px;
    left: 0;
    /* position: absolute; */
    top: 0;
    width: 100%;
}

#capturebtn {
    z-index: 9999;
    width: 100%;
    height: auto;
}

#capturebtn input {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    right: 0;
    bottom: 15px;
    left: 0;
    position: fixed;
}

@media(max-width:960px) and (min-width: 768px) {
    #cover {
        display: block;
        height: 241px !important;
        left: 0;
        position: absolute;
        top: 0;
        width: 650px !important;
    }
    .cover-container {
        display: table;
        height: 241px;
        margin: 5% auto 0;
        width: 650px;
        position: relative;
    }
}

#capture {
    left: -100px !important;
}

#reset {
    left: 100px !important;
}

#crop {
    left: 300px !important;
}

@media(max-width:767px) and (min-width: 360px) {
    #cover {
        display: block;
        height: 185px !important;
        left: 0;
        position: absolute;
        top: 0;
        width: 500px !important;
    }
    .cover-container {
        display: table;
        height: 185px;
        margin: 5% auto 0;
        width: 500px;
        position: relative;
    }
}
    </style>
    <script>
    var cropPicture = function () {


    var cover = document.getElementById("cover");
    var ctx = cover.getContext("2d");



    var img = new Image();
    img.onload = function () {


        var position = $("#cover").offset();

        //alert(JSON.stringify($("#cover").offset()));
        //alert("cover width " + cover.width);
        //alert("cover height" + cover.height);
        //alert(position.left);


        var coverLeft = position.left;
        var coverTop = position.top;


        var coverwidth = 851;
        var coverheight = 315;


        //            var width = $('#cover').width();
        //            var parentWidth = $('#container').offsetParent().width();
        //            var percent = 100 * width / parentWidth;

        //alert("percent " + percent);
        alert("innerWidth " + window.innerWidth);

        var destWidth = $('#cover').width();
        var destHeight = $('#cover').height();

        alert("destWidth " + destWidth);

        ctx.drawImage(img, coverLeft, coverTop, coverwidth, coverheight, 0, 0, destWidth, destHeight);

        //$("#source").css("display", "none");
    }
    img.src = document.getElementById("source").src;


}
    </script>

    <body>
<div id="container">
    <div class="cover-container">
        <canvas id="cover" height="315" width="851" style="border:1px solid #000"></canvas>
    </div>
    <img id="source" width="100%" height="100%" src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
</div>
<div id="capturebtn">
    <input id="crop" type="button" value="Crop" onclick="cropPicture();" />
</div>
    </body>

    </html>

https://jsfiddle.net/w4a5gtvk/ a fiddle, easier to read and test than your mix of html/CSS/JavaScript. Have a look to that useful lib http://projects.calebevans.me/jcanvas/docs/scaleCanvas/ — nicolallias, Jul 11 '16 at 15:00
**Did you mean to say "resoulution"?** An html5 canvas resolution will typically be 96px so if you `drawImage` an image with higher resolution then you will lose resolution on the canvas. If you just want to crop a portion of a larger image check this previous [Q&A](http://stackoverflow.com/questions/34242155/how-to-crop-canvas-todataurl/34244421#34244421). — markE, Jul 11 '16 at 17:12
I have added it to jsfiddle [link](https://jsfiddle.net/w4a5gtvk/2/) — Sunoj Vijayan, Jul 12 '16 at 01:27
Canvas can become distorted when you use CSS sizing of the canvas. Instead, resize the canvas element itself: ` — markE, Jul 12 '16 at 16:25

Jquery crop using canvas not working

0 Answers0