<div class="box">

<img src="1.png" alt="">

<i></i>

</div>

<canvas id="canvas"></canvas>

<script>

window.onload = function(){

　　var canvas = document.getElementsByTagName("canvas")[0];

　　var imgObj = document.getElementsByTagName("img")[0];

　　var i = document.getElementsByTagName("i")[0];

　　var context = canvas.getContext("2d");

　　var reloadCanvas = function() {

　　　　context.clearRect(0, 0, 150, 150);

　　　　//原始图片截取范围是css写死的 可以使用jquery插件Jcrop来获取

　　　　context.drawImage(imgObj, i.offsetLeft, i.offsetTop, i.clientWidth, i.clientHeight, 0, 0, 200, 100);

　　　　canvas.toBlob(function(blob){

　　　　　　console.log(blob)

　　　　},'image/jpg');

　　}

　　reloadCanvas();

}

</script>