骨刻文字数字化识别5

---

一、（续）图片裁剪功能实现

关于如何得到裁剪区域，经过查找资料，得到：
可以用一个position:absolute的div框来选择裁剪区域，通过javascript提供的方法能得到该div在canvas中所处的位置(x,y)，然后用getImageData(srcX,srcY,width,height)得到选择框中的像素点。 这里需要知道，通过canvas.getBoundingClientRect().left和canvas.getBoundingClientRect().top可以得到canvas相对于浏览器视图的左边和上边位置。

 var canvas2 = document.createElement("canvas")
39     var cxt2=canvas2.getContext("2d")
40     img.onload = function(){
41         cxt1.drawImage(img,0,0,canvas1.width,canvas1.height);
42         var dataImg = cxt1.getImageData(srcX,srcY,sWidth,sHeight)
43         canvas2.width = sWidth;
44         canvas2.height = sHeight;
45         cxt2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height)

二、显示裁剪后的区域

这里可以创建一个canvas2,用canvas2.putImageData(imgData,0,0,canvas2.width,canvas2.height)将选择框里的像素绘制到这个临时的canvas2里。然后用canvas2.toDataURL(“image/png”)将canvas2转为dataurl类型的图片。有了dataurl后，就可以正常显示裁剪后的图片了。

var canvas2 = document.createElement("canvas")
39     var cxt2=canvas2.getContext("2d")
40     img.onload = function(){
41         cxt1.drawImage(img,0,0,canvas1.width,canvas1.height);
42         var dataImg = cxt1.getImageData(srcX,srcY,sWidth,sHeight)
43         canvas2.width = sWidth;
44         canvas2.height = sHeight;
45         cxt2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height)
46         var img2 = canvas2.toDataURL("image/png");
47 
48         var cxt3=canvas3.getContext("2d")
49         var img3 = new Image();
50         img3.src = img2;
51         img3.onload  = function(){
52             cxt3.drawImage(img3,0,0,canvas3.width,canvas3.height)
53         }