Canvas实现图片的预览

Canvas实现图片的预览和裁剪

一,图片预览知识点详解

1.  getContext() 方法返回一个用于在画布上绘图的环境。

2.

drawImage() 方法在画布上绘制图像、画布

案例如下 :

//    html部分
//<img id="tulip" src="000.jpg" alt=""/>
//<canvas id="myCanvas" ></canvas>
//    js部分
    var c=document.getElementById("myCanvas");
//    getContext() 方法返回一个用于在画布上绘图的环境。
    var ctx=c.getContext("2d");
    var img=document.getElementById("tulip");
//    drawImage() 方法在画布上绘制图像、画布或视频。
//    drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
//    JavaScript 语法 1
//    在画布上定位图像：
//    context.drawImage(img,x,y);
//    JavaScript 语法 2
//    在画布上定位图像，并规定图像的宽度和高度：
//    context.drawImage(img,x,y,width,height);
//    JavaScript 语法 3
//    剪切图像，并在画布上定位被剪切的部分：
//    context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    ctx.drawImage(img,0,0);