当前位置: 萬仟网 > IT编程>网页制作>HTML > canvas画布加载图片 - Kaiqisan

canvas画布加载图片 - Kaiqisan

2020年07月14日  | 萬仟网IT编程  | 我要评论

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)

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

注意点

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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com