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-imagectx.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.widthlet hei = image.heightlet com = 0.5let com2 = 0.3ctx.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.widthlet hei = image2.heightlet com = 0.5let com2 = 0.3// 额外增加了四个参数,可以实现裁剪图片的效果 ,第六七八九个参数裁剪图像ctx.drawImage(image2,0, 0, wid * com, wid * com, 0, 0, 400, 400)}}
总结
这个裁剪图像的功能,我觉得是最具有实用性的一个功能,在项目实践中,我们通常可以用在修改用户头像这里,用户自己上传一张图片,再通过用户的主动裁剪,然后将裁剪后的方法通过上面的drawImage
方法裁剪,最后上传服务器,这一流程下来就可以完成基本的业务。还有其他方法也可以使用图像裁剪,比如用在H5小游戏等等地方。总之,图像裁剪是一个很灵活方便的方法,大家可以发挥自己的想象力来使用它,会有奇效!
canvas画布加载图片 - Kaiqisan相关推荐
- canvas初体验之加载图片
上一篇的介绍主要是画一些基本的图案,这一篇主要是加载图案. canvas加载图片主要分为两个步骤: 1.获取图片资源. 2.将图片资源画到画布上. 1.1获取图片资源,canvasAPI为我们提供了多 ...
- html5 canvas 加载图片
html5 canvas 加载图片 视频 https://www.bilibili.com/video/BV19E411G7Vj?p=30 https://www.bilibili.com/video ...
- canvas学习day3——加载图片loadImage函数,理解回调函数
回调函数 回调函数理解 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货.在这个例子里,你的电话号码就 ...
- android grideview 图片png透明,Android完美解决GridView异步加载图片和加载大量图片时出现Out Of Memory问题...
众所周知,我们在使用GridView或者ListView时,通常会遇到两个棘手的问题: 1.每个Item获取的数据所用的时间太长会导致程序长时间黑屏,更甚会导致程序ANR,也就是Application ...
- android 加载网络bitmap图片 oom 简书_Android常见问题--ImageView加载图片OOM
开发中给ImageView加载一个高质量图片时,APP抛出了"Canvas: trying to draw too large(840253440bytes) bitmap."的异 ...
- 使用java concurrent处理异步加载图片功能
转载:http://marshal.easymorse.com/archives/3081 java5开始,增加了concurrent api,用于并发处理.比如起多个线程并发从网络上下载图片,然后在 ...
- maximo工作流画布加载失败问题
maximo工作流画布加载不成功且出现如下提示:WorkFlow Canvas failed to load! -- Please check browser security settings an ...
- Bmob+Luban(鲁班)压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
- Python3:pygame模块的简单的使用(加载图片并让图片动起来)
1.前言 由于前面学习了使用pygame的简单操作,现在学习当前的pygame怎么加载图片,并实现动画效果 2.首先在当前的界面中加载一个图片 使用的图片为: # 使用当前的pygame加载图片imp ...
最新文章
- Microsoft 服务器产品端口
- 来自 IsayNo (@IsayNooo) 的推文
- 回退进度_【蜕变】V7账号发展进度第47期:回归宝箱开个都是啥呀!瞬间无爱了...
- db2分页查询sql语句_MySQL学习(八):SQL查询语句的用法和优化
- Multipath多路径冗余全解
- 判断点是否在给定四边形内的算法
- react-native 编译出现 ld: library not found for -lDoubleConversion 错误的解决方案
- python验证码校验代码_python 图片验证码代码
- 【信号与系统】z变换
- 模糊C均值聚类 C++代码
- ATmega / AVR单片机型号标识规则及选型
- 模拟登陆广工统一认证系统
- HTML初学者--列表的简单制作
- Vue实例--音乐播放器:歌单数据接口分析
- 微型计算机之哈佛架构是什么?
- 在线教育项目02_前端知识(es6、vue)
- 01-Partial Dependence Plot(PDP)部分依赖图
- Excel数据透视表之多重合并
- Python学习笔记(十九)——Matplotlib入门
- 城市垃圾类毕业论文文献有哪些?