canvas画布加载图片 - Kaiqisan

canvas画布加载图片

就是往画布里面添加一些本地的或者网络上的图片。从而使画布图文并茂。

关键代码

let image = new Image(): 这里新增一个图片对象，它是一个图像的载体。但通过console.log(image)打印可以得知，其实它是一个html里的img标签，所有它拥有img标签里面的所有属性。在canvas转化img标签的时候它也能够发挥作用。

所以下面主要讲述在canvas插入图片的时候会用到的属性，其他的就不再赘述，大家可以去官网查看具体教程

https://www.runoob.com/jsref/dom-obj-image.html

image.src: 指定图像的来源，它可以是本地资源，也可以是网络资源。

image.onload: 一个异步操作，只有在图像加载完成之后才会执行。

image.onload = () => { // 使用箭头函数是为了减少this的使用。
    // 代码省略一万行
}

image.onerror: 一个异步操作当找不到图像资源的时候就会执行这个方法，防止因为找不到图片资源而报错

image.onabort = () => { 
    // 代码省略一万行
}

image.onabort: 用得很少，它在图像加载被中断时发生(可能是服务端在客户端加载图像的时候撤回资源，也可能是客户端的主观行为，停止了图片的载入)。

image.onabort = () => { 
    // 代码省略一万行
}

ctx.fillStyle = ctx.createPattern(image, repetition): 指定的方向内重复指定的元素(官方原话)。给当前的填充样式赋予一个填充内容，不只是以前的纯色这么简单了。它的第二个属性是选择是否在绘制范围内重复，它的属性值有 repeat repeat-x repeat-y no-repeat,性质与css中的background-repeat是一样的，它一般与fillRect配合使用（一般的图片都是矩形的），如果碰到一些形状特殊的图像或者自己的个人需要，也可以自己绘制一个图形然后使用fill方法填充也可以达到显示图片的效果。

drawImage(image, x, y): 可以指定画布的某一位置开始绘制原图，这里的x, y指定图片左上角的坐标。

ctx.drawImage(image, 100, 100)

drawImage(image, x, y, wid, hei): 可以在原图的基础上绘制自定义尺寸的图。

ctx.drawImage(image, 100, 100, 400, 500)

drawImage(image, x, y, wid, hei, x2, y2, wid2, hei2): 更多的参数。它可以剪切图像，应用于裁剪。image为图片对象，x为开始剪切图片的x轴位置，y为开始剪切图片的y轴的位置，wid为剪切的图片的宽度，hei为剪切图片的高度，x2， y2为在画布上放置的图像的位置，wid2,hei2分别为选择放置于画布上的图像的宽度和高度（它的意思是对已经剪切成宽为wid,高外hei的图像进行再拉伸，拉伸成宽为wid2，高为hei2的新图像，然后在画布中的合适位置进行绘制）。

ctx.drawImage(image, 100, 100, 400, 500, 0, 0, 800, 1000)

图中的第一步并不会显示，但是是必经之路。

注意点

image虽然可以获取图像信息，但对于获取的图像的基本参数,比如图像的长宽等等的，是只读的，我们无法直接修改图像的长宽，但我们可以控制绘制在画布上的图像的一些属性。

参考代码1

	window.onload = () => {
	     let canvas = document.getElementById('demo')
         let ctx = canvas.getContext('2d')
		let image = new Image()
		image.src = './imgs/otome1.png'
		image.onload = () => {
             ctx.fillStyle = ctx.createPattern(image, 'repeat') // 性质相当于css中的background-image
			ctx.fillRect(0, 0, 1000, 550) // 最终渲染的位置
		}
	}

参考代码2

	window.onload = () => {
        let canvas = document.getElementById('demo')
        let ctx = canvas.getContext('2d')
        let image = new Image()
        image.src = './imgs/otome1.png'
        image.onload = function () {
            let wid = image.width
            let hei = image.height
            let com = 0.5
            let com2 = 0.3
            ctx.drawImage(image, 100, 100, wid * com, hei * com)
            ctx.drawImage(image, 400, 400, wid * com2, hei * com2)
        }
        let image2 = new Image() // 参数后加数字是不规范的命名标准，不建议使用
        image2.src = './imgs/cat1.jpg' // 图片路径自己定义
        image2.onload = function () {
            let wid = image2.width
            let hei = image2.height
            let com = 0.5
            let com2 = 0.3
            // 额外增加了四个参数，可以实现裁剪图片的效果 ，第六七八九个参数裁剪图像
            ctx.drawImage(image2,0, 0, wid * com, wid * com, 0, 0, 400, 400)
        }
    }

总结

这个裁剪图像的功能，我觉得是最具有实用性的一个功能，在项目实践中，我们通常可以用在修改用户头像这里，用户自己上传一张图片，再通过用户的主动裁剪，然后将裁剪后的方法通过上面的drawImage方法裁剪，最后上传服务器，这一流程下来就可以完成基本的业务。还有其他方法也可以使用图像裁剪，比如用在H5小游戏等等地方。总之，图像裁剪是一个很灵活方便的方法，大家可以发挥自己的想象力来使用它，会有奇效！

本文地址：https://blog.csdn.net/qq_33933205/article/details/107298622