Canvas玩转图像处理_技术笔记

pinzaghi 2019-12-08

可以设置滑动条的min和max数值

截图
0赞 · 0采集
pinzaghi 2019-12-08

input的type设为range为滑动条

截图
0赞 · 0采集
慕侠4364581 2017-04-15

<script > var canvas=document.getElementById("canvas") var context=canvas.getContext("2d")//全局要双引号 var slider=document.getElementById("scale-range") var image=new Image() window.onload=function(){ canvas.width=1152; canvas.height=768; var scale=slider.value; image.src="img-lg.jpg"; image.onload=function(){ drawImagebyscale(scale); } } } function drawImagebyscale(scale) { var imageWidth=1152*scale; var imageHeight=768*scale; // var sx=imageWidth/2-canvas.width/2; // var sy=imageHeight/2-canvas.height/2; // context.drawImage(image,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height); var dx=canvas.width/2-imageWidth/2; var dy=canvas.height/2-imageHeight/2; context.drawImage(image,dx,dy,imageWidth,imageHeight); }

0赞 · 0采集
慕斯7036458 2017-01-03

6666666

截图
0赞 · 0采集
无所畏惧小小小 2016-10-13

html中添加划竿控件 <input type="range" name="hg" min="0.5" max="3.0"step="0.01" value="1.0" style="display: block;width: 800px;" value="" /> min="0.5" 最小缩放为原大小的0.5 max="3.0" 最大缩放原来的三倍 step="0.01"步数0.01 value="1.0" 初值大小为原来的大小将剪裁的图片完全显示在canvas画布中 var dx=canvas.width/2-imageWidth/2; var dy=canvas.height/2-imageHeight/2; context.drawImage(image,dx,dy,imageWidth,imageHeight)

0赞 · 0采集
唯禁品 2016-09-22

1、如果图片超出canvas 他会自动裁剪掉多余部分 2. var imageWidth=1152*scale; var imageHeight=768*scale; var sx=imageWidth/2-canvas.Width/2; var sh=imageHeight/2-canvas.Height/2; context.drawImage(image,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height); //可以放大显示缺点缩小后sx和sh为负数找不到原图的图片位置而无法准确显示所以修改为： var dx=canvas.Width/2-imageWidth/2; var dy=canvas.Height/2-imageHeight/2; context.drawImage(image,dx,dy,imageWidth,imageHeihgt); 用这个来规定图片的大小语法：在画布上定位图像： context.drawImage(img,x,y); JavaScript 语法 2 在画布上定位图像，并规定图像的宽度和高度： context.drawImage(img,x,y,width,height); JavaScript 语法 3 剪切图像，并在画布上定位被剪切的部分： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

0赞 · 0采集
DQJ俊逸 2016-08-15

1、如果图片超出canvas 他会自动裁剪掉多余部分 2. var imageWidth=1152*scale; var imageHeight=768*scale; var sx=imageWidth/2-canvas.Width/2; var sh=imageHeight/2-canvas.Height/2; context.drawImage(image,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height); //可以放大显示缺点缩小后sx和sh为负数找不到原图的图片位置而无法准确显示所以修改为： var dx=canvas.Width/2-imageWidth/2; var dy=canvas.Height/2-imageHeight/2; context.drawImage(image,dx,dy,imageWidth,imageHeihgt); 用这个来规定图片的大小语法：在画布上定位图像： context.drawImage(img,x,y); JavaScript 语法 2 在画布上定位图像，并规定图像的宽度和高度： context.drawImage(img,x,y,width,height); JavaScript 语法 3 剪切图像，并在画布上定位被剪切的部分： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

0赞 · 1采集
铅笔小白 2016-04-05

关于input range的使用

截图
0赞 · 0采集
tyy1 2016-03-15

缩放函数

截图
0赞 · 0采集
珍惜小燕子 2016-02-02

图片放大后，画布裁剪的区域

截图
0赞 · 0采集
小红帽吃掉大灰狼 2016-01-27

绿色是放大的图片，蓝色是canvas大小，需要将图片放在中间，要算从图片的哪个位置开始截图，因此需要知道sx,sy

截图
0赞 · 1采集
weibo_喵呜oO0_0 2016-01-24

drawimage

截图
0赞 · 0采集
慕少4432244 2016-01-11

scale放大后的位置图像

截图
0赞 · 0采集
二十四节花信风 2015-12-23

2中方法：<br> 1.裁剪图像，然后将图像平铺在整个画布中，需要判断放大和缩小的情况<br> 2.改变图片的绘制点，高度和宽度

0赞 · 0采集
111216sod 2015-12-15

图片的大小的一半减去画布的一半的大小。来确定图片位置。

截图
0赞 · 0采集
qq_米老头_0 2015-11-07

滑竿3

截图
0赞 · 0采集
qq_米老头_0 2015-11-07

滑竿2

截图
0赞 · 0采集
qq_米老头_0 2015-11-07

下拉1

截图
0赞 · 0采集
梭梭 2015-11-06

放大和缩小图像的方法，超过画布的裁剪，在画布内的显示

截图
0赞 · 0采集
梭梭 2015-11-06

放大图像的方法

截图
0赞 · 0采集
qq_纯粹_3 2015-10-28

mark 这个技巧讲的好

0赞 · 0采集
lonelye 2015-10-23

scale缩放计算

截图
0赞 · 0采集

数据加载中...