canvas 截图图片 生成新图片

<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>