canvas - 裁剪并保存图片

canvas - 裁剪图片

最近看了学习了一下子canvas的相关知识，心情比较好，嗯，是的！
流行的截图是不是这样弄得？让我也来试试看，然后写了一个我很满意的demo，
暂评99分吧（90的鼓励分）

知识点

drawImage(img, x, y) : 在画布上定位图像

drawImage(img, x, y,width,height) : 在画布上定位图像，并规定图像高度

drawImage(img,sx,sy,swidth,sheight,x,y,width,height) : 剪切图像，并在画布上

定位被剪切的部分
    img：规定要使用的图像、画布或视频
 	sx：可选。开始剪切的图片上的 x 坐标位置
 	sy：可选。开始剪切的图片上的 y 坐标位置
 	swidth：可选。被剪切图像的宽度
 	sheight：可选。被剪切图像的高度
 	x：在画布上放置图像的 x 坐标位置
 	y：在画布上放置图像的 y 坐标位置
 	width：可选。要使用的图像的宽度
 	height：可选。要使用的图像的高度
 	
截图功能：sx、sy（截图图片的起始位置，左上角）
		 swidth、sheight（截图图片的宽高，此截图的宽高为实际图片的真实大小）
		 x、y（截图结果图片展示的左上角位置）
		 width、height（截图结果图片的宽高）

演示效果：

核心代码

思路：

    1. 选择图片并获取图片信息

    2. 渲染canvas

    3. 监听canvas区域是否被连续点击 - 截图

    4. 获取截图区域canvas

    5. 绘制点击区域图片框

    6. 动态生成a标签，利用其download属性，下载截图图片
   

重点方法

方法名	效果	资料
toDataURL（）	将canvas转化为base64	说明
getImageData（）	保存canvas内容	说明
putImageData（）	渲染保存的canvas内容	说明

通过上述内容，你也许还不太明白，在这里我只用一句话总结一下：
使用canvas渲染图片，通过控制裁剪区域获取其中内容，$转化base64$，就可以得到截图效果，
其中，下载为图片是不是很神奇？
那么请转到百度搜索 html5 <a> download,

canvas学习地址：https://www.cnblogs.com/webhmy/p/9556121.html

欢迎来到我的世界 demo地址：https://github.com/Ying-YJH/success

最后，祝大家天天有西瓜吃，，（额，请理解吃货面对火辣辣太阳的感受）