|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
【示例】Canvas修改圖片：復(fù)制、旋轉(zhuǎn)、調(diào)整、縮放、裁剪
作者:admin 時間:2022-8-12 15:44:9 瀏覽:Canvas 擅長的一件事是修改圖像。任何圖像都可以作為 Canvas 的數(shù)據(jù)源：img 元素、視頻元素甚至是另一個 Canvas 。獲得數(shù)據(jù)后，你可以逐個像素地或使用 Canvas API 來操作它。
本文介紹 Canvas 如何操作圖片：復(fù)制（copy）、旋轉(zhuǎn)（rotate）、調(diào)整（resize）、縮放（scale）、裁剪（crop）。
復(fù)制（copy）
效果
HTML
<!DOCTYPE html>
<html>
<body>
<p>圖像：</p> <img id="img1" src="img-1.jpg">
<p>
<button>復(fù)制圖像到 Canvas --></button>
</p>
<p>Canvas:</p>
<canvas id="canvas1" style="border:15px solid #000066;"> 你的瀏覽器不支持 HTML5 canvas </canvas>
<script>
var sourceimage = document.querySelector('img');
var canvas = document.querySelector('canvas');
canvas.height = canvas.width = 0;
var context = canvas.getContext('2d');
function copy() {
var imgwidth = sourceimage.offsetWidth;
var imgheight = sourceimage.offsetHeight;
canvas.width = imgwidth;
canvas.height = imgheight;
context.drawImage(sourceimage, 0, 0);
}
var button = document.querySelector('button');
button.addEventListener('click', copy, false);
</script>
</body>
</html>
在 Canvas上擁有圖像后，你可以使用 Canvas API 以任何方式對其進行操作。請注意，Canvas 中沒有狀態(tài)。每一步都像在 Canvas 的原始內(nèi)容上繪畫，沒有撤消。你所做的就是操縱 Canvas。
旋轉(zhuǎn)（rotate）
效果
HTML
<!DOCTYPE html>
<html>
<body>
<p>圖像：</p> <img id="img1" src="img-2.jpg">
<p>
<button>旋轉(zhuǎn)90度并將圖像復(fù)制到 Canvas --></button>
</p>
<p>Canvas:</p>
<canvas id="canvas1" style="border:15px solid #000066;"> 你的瀏覽器不支持 HTML5 canvas </canvas>
<script>
var sourceimage = document.querySelector('img');
var canvas = document.querySelector('canvas');
canvas.height = 0;
canvas.width = 0;
var context = canvas.getContext('2d');
function rotate() {
var imgwidth = sourceimage.offsetWidth;
var imgheight = sourceimage.offsetHeight;
canvas.width = imgwidth;
canvas.height = imgheight;
context.save();
context.translate(imgwidth / 2, imgheight / 2);
context.rotate(Math.PI/2);
context.drawImage(
sourceimage, -(imgwidth / 2), -(imgheight / 2)
);
context.restore();
}
var button = document.querySelector('button');
button.addEventListener('click', rotate, false);
</script>
</body>
</html>
調(diào)整（resize）
drawImage()方法不僅可以復(fù)制圖像，還可以調(diào)整其大小。這不像調(diào)整 IMG 元素的大小——它只是在視覺上做到這一點。在 Canvas 上調(diào)整大小還意味著你丟棄或向圖像添加像素。這是一個真正的繪畫過程，而不是擠壓或拉伸。要調(diào)整圖像大小，你需要做的就是在drawImage()方法的參數(shù)中定義不同的大小。
效果
HTML
<!DOCTYPE html>
<html>
<body>
<p>圖像：</p> <img id="img1" src="img-1.jpg">
<p>
<button>將圖像大小調(diào)整為 150×100 --></button>
</p>
<p>Canvas:</p>
<canvas id="canvas1" style="border:15px solid #000066;"> 你的瀏覽器不支持 HTML5 canvas </canvas>
<script>
var sourceimage = document.querySelector('img');
var canvas = document.querySelector('canvas');
canvas.height = canvas.width = 0;
var context = canvas.getContext('2d');
function resize() {
var imgwidth = sourceimage.offsetWidth;
var imgheight = sourceimage.offsetHeight;
canvas.width = 150;
canvas.height = 100;
context.drawImage(
sourceimage, 0, 0, imgwidth, imgheight, 0, 0, 150, 100
);
}
var button = document.querySelector('button');
button.addEventListener('click', resize, false);
</script>
</body>
</html>
縮放（scale）
如果你要做的只是將圖像縮放某個因子，你還可以縮放上下文的坐標系。
效果
HTML
<!DOCTYPE html>
<html>
<body>
<p>圖像：</p> <img id="img1" src="img-1.jpg">
<p>
<button>將圖像縮放到 50% --></button>
</p>
<p>Canvas:</p>
<canvas id="canvas1" style="border:15px solid #000066;"> 你的瀏覽器不支持 HTML5 canvas </canvas>
<script>
var sourceimage = document.querySelector('img');
var canvas = document.querySelector('canvas');
canvas.height = 0;
canvas.width = 0;
var context = canvas.getContext('2d');
var scalex = 1/2;
var scaley = 1/2;
function scale(){
var imgwidth = sourceimage.offsetWidth;
var imgheight = sourceimage.offsetHeight;
canvas.width = imgwidth * scalex;
canvas.height = imgheight * scaley;
context.scale(scalex, scaley);
context.drawImage(sourceimage, 0, 0);
}
var button = document.querySelector('button');
button.addEventListener('click', scale, false);
</script>
</body>
</html>
裁剪（crop）
除了使用整個圖像，你還可以訪問其中的一部分。drawImage()方法允許你選擇圖像的一部分。你需要做的就是提供一個起始坐標以及要復(fù)制的正方形的寬度和高度。例如，要從上面的畫布徽標中裁剪“W”，你只需要知道字母從哪里開始以及它有多寬和多高。
效果
HTML
<!DOCTYPE html>
<html>
<body>
<p>圖像：</p> <img id="img1" src="img-1.jpg">
<p>
<button>裁剪出“W” --></button>
</p>
<p>Canvas:</p>
<canvas id="canvas1" style="border:15px solid #000066;"> 你的瀏覽器不支持 HTML5 canvas </canvas>
<script>
var sourceimage = document.querySelector('img');
var canvas = document.querySelector('canvas');
canvas.height = canvas.width = 0;
var context = canvas.getContext('2d');
function copy() {
canvas.width = 25;
canvas.height = 16;
context.drawImage(
sourceimage, 26, 15, 25, 16, 0, 0, 25, 16
);
}
var button = document.querySelector('button');
button.addEventListener('click', copy, false);
</script>
</body>
</html>
分析
drawImage(sourceimage, 26, 15, 25, 16, 0, 0, 25, 16) 中，26,15 是 W 字母的左上角起點坐標(x,y)，25,16 是 W 字母的寬和高，單位是像素（px）。
總結(jié)
本文通過5個示例，介紹了Canvas修改圖片的方法：復(fù)制（copy）、旋轉(zhuǎn)（rotate）、調(diào)整（resize）、縮放（scale）、裁剪（crop），我們需要弄明白drawImage()函數(shù)的使用。
相關(guān)文章
標簽: Canvas
- 站長推薦
