HTML5画布之drawImage()：将图片绘制到画布
本帖最后由 马黑黑 于 2022-3-3 15:44 编辑现成的图片可以绘制到canvas画布里来，这需要用到drawImage()方法。此方法最简单的语法如下：
context.drawImage(image,dx,dy);
image参数是目标图片，可以是本地文件（本地测试的话），也可以是有效的网络文件；dx指画布canvas上的x坐标，dy值y坐标。这三个参数是 drawImage() 方法必选参数。
可以在画布上设定图片呈现的宽度和高度，这时，需要加入dw和dh两个可选参数：
context.drawImage(image,dx,dy,dw,dh);
现在是五个参数了，其中新增的dw和dh分别指图片在canvas画布上呈现的宽度与高度。dw和dh不要的话，则按原始图片的尺寸呈现，但受制于画布的尺寸——画布若小于图片，图片将只呈现画布大小的尺寸，超出画布的部分会被裁减掉。
还可以指定原始图片从哪开始剪裁、剪裁的宽度与高度尺寸是多少，这时，参数就凑够九个了，够吓人的：
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
新增的四个可选参数都以s开头，s是src的缩写，sx和sy指从原始图片的xy坐标值处开始裁剪，sw和sh表示相对于sx和sy裁剪到横向和纵向的多少尺寸。这四个值省略的话，从（0,0）开始裁剪，裁剪到全部的宽高尺寸。
这里需要提醒一下：所有参数仅支持纯数字，单位只能为像素但不要写出来，百分比的表示法是不受支持的，canvas相关属性和方法的参数都如此。
有意思的是，drawImage方法支持对视频图像的抓取，以后条件成熟了再介绍。
下面给一个实例让大家领略一下把图片简单“搬到”画布的方法：
<canvas id="cPic" width="300" height="300">亲的浏览器好老</canvas>
<script>
var cc = document.getElementById('cPic'); //画布操作标识
var ct = cc.getContext('2d'); //创建2d画笔并授权给 ct 变量
var pic = new Image(); //定义新图像：JS通用方法，非canvas方法
pic.src = "/data/attachment/forum/202202/14/122702ng48mingmvnwqlem.jpg"; //指定图像路径
//图片加载事件发生时：用drawImage方法画到canvas中
pic.onload = function(){
ct.drawImage(pic,0,0,300,300);
/*这里仅使用 image、dx、dy三个必需的参数，还有两个可选参数dw和dh，
忽视原始图片的坐标和尺寸，原始图片将被缩放，可能会变形*/
//ct.drawImage(pic,10,10,600,600,0,0,300,300); // 这个裁剪也不错
}
</script>
<canvas id="cPic" width="300" height="300">亲的浏览器好老</canvas>
<script>
var cc = document.getElementById('cPic'); //画布操作标识
var ct = cc.getContext('2d'); //创建2d画笔并授权给 ct 变量
var pic = new Image(); //定义新图像：JS通用方法，非canvas方法
pic.src = "/data/attachment/forum/202202/14/122702ng48mingmvnwqlem.jpg"; //指定图像路径
//图片加载事件发生时：用drawImage方法画到canvas中
pic.onload = function(){
ct.drawImage(pic,0,0,300,300);
/*这里仅使用 image、dx、dy三个必需的参数，还有两个可选参数dw和dh，
忽视原始图片，原始图片将被缩放，可能会变形*/
//ct.drawImage(pic,10,10,600,600,0,0,300,300); // 这个裁剪也不错
}
</script> 我来捋捋，也就是说drawImage()是数里面的参数个数来决定对图片的处理？
里面除了图片名，如偶只有2个参数，就是只规定了画布上的坐标，图片按原始的。
要是有4个参数，就是画布上坐标加图片长宽。
超过4个，就是对图片动刀子了。需要8个参数4对。第一对，图片上指定点，第二对需要的宽高。剩下的两对和4个参数时一样。 /ct.drawImage(pic,10,10,600,600,0,0,300,300); // 这个裁剪也不错
这个裁剪没看懂，画布300，拉到600有什么用啊。
这个展示出来应该是图片不变吧？ <canvas id="hy" width="300" height="300">亲的浏览器好老</canvas>
<script>
var cc1 = document.getElementById('hy'); //画布操作标识
var ct1 = cc1.getContext('2d'); //创建2d画笔并授权给 ct 变量
var pic1 = new Image(); //定义新图像：JS通用方法，非canvas方法
pic1.src = "/data/attachment/forum/202202/14/122702ng48mingmvnwqlem.jpg"; //指定图像路径
//图片加载事件发生时：用drawImage方法画到canvas中
pic1.onload = function(){
ct1.drawImage(pic1,10,10,600,600,0,0,300,300);
/*这里仅使用 image、dx、dy三个必需的参数，还有两个可选参数dw和dh，
忽视原始图片，原始图片将被缩放，可能会变形*/
//ct.drawImage(pic,10,10,600,600,0,0,300,300); // 这个裁剪也不错
}
</script> 上面的就是10,10,600,600,0,0,300,300 不知道原来图片多大，看起来拉到600就已经开始动刀子了。 红影 发表于 2022-3-3 17:43
上面的就是10,10,600,600,0,0,300,300 不知道原来图片多大，看起来拉到600就已经开始动刀子了。
这个时候，像素尺子就用的上了吧{:5_106:} 马黑黑 发表于 2022-3-3 18:05
这个时候，像素尺子就用的上了吧
看到了，原来的图片是811*458
原来直接放图片并不是直接裁剪，而是压缩到画布里了，而那个9个数据的，反倒是进行了裁剪。
还是不对，长宽都拉到600的，为什么没变形呢。这个东西的尺寸也有点让人晕呢。 红影 发表于 2022-3-3 18:55
看到了，原来的图片是811*458
原来直接放图片并不是直接裁剪，而是压缩到画布里了，而那个9个数据的，反 ...
截取的部分按比例压缩是不会变形的 马黑黑 发表于 2022-3-3 20:01
截取的部分按比例压缩是不会变形的
你2楼的貌似不是按比例压缩的。感觉后面有5个参数的时候不是裁剪，是压缩。 本帖最后由 马黑黑 于 2022-3-3 21:43 编辑
红影 发表于 2022-3-3 21:40
你2楼的貌似不是按比例压缩的。感觉后面有5个参数的时候不是裁剪，是压缩。
不指定 s-系的值就是伸缩。s是src的缩写，指向原始图片 本帖最后由 马黑黑 于 2022-3-3 21:50 编辑
红影 发表于 2022-3-3 17:32
我来捋捋，也就是说drawImage()是数里面的参数个数来决定对图片的处理？
里面除了图片名，如偶只有2个参数 ...三个参数是，完整呈现图片但超出画布的部分不显示。
五个参数时，没有原始图片的定位与剪裁宽高，所以会拉伸处理原始图片；
九个参数用完时，第二、三、四、五个参数依次是原始图片的x、y、width、height值，其中xy是起始切割坐标，width、height是切割宽高。 马黑黑 发表于 2022-3-3 21:41
不指定 s-系的值就是伸缩。s是src的缩写，指向原始图片
嗯嗯，现在知道了，要是想用裁剪适应画布，需要用9个参数那个。 马黑黑 发表于 2022-3-3 21:48
三个参数是，完整呈现图片但超出画布的部分不显示。
五个参数时，没有原始图片的定位与剪裁宽高，所以会拉 ...
这楼的说得最清楚简洁{:4_199:} 红影 发表于 2022-3-4 10:56
这楼的说得最清楚简洁
也要去亲测才能有更深刻的体会 红影 发表于 2022-3-4 10:54
嗯嗯，现在知道了，要是想用裁剪适应画布，需要用9个参数那个。
参数多是多，却不难理解 马黑黑 发表于 2022-3-4 13:40
也要去亲测才能有更深刻的体会
吧图片弄到画布上是为了派什么用处的呢？
马黑黑 发表于 2022-3-4 13:41
参数多是多，却不难理解
是的，这个倒是非常容易理解呢。 红影 发表于 2022-3-4 21:39
是的，这个倒是非常容易理解呢。
是这样的
马黑黑 发表于 2022-3-4 21:44
是这样的
不像双循环里的语句那么陌生。