Gunakan fungsi JavaScript untuk mencapai pemprosesan imej dan kesan penapis
Kata Pengantar:
Dalam pembangunan Web, pemprosesan imej dan penapis Kesan adalah satu keperluan yang sangat biasa. Dengan JavaScript, kita boleh melaksanakan fungsi ini dengan menulis fungsi. Artikel ini akan memperkenalkan cara menggunakan fungsi JavaScript untuk mencapai pemprosesan imej dan kesan penapis, serta memberikan contoh kod khusus.
1.1 Laraskan saiz imej
Anda boleh menggunakan fungsi resizeImage
untuk mengubah saiz imej. Fungsi ini menerima tiga parameter: objek imej sumber, lebar sasaran dan ketinggian sasaran. resizeImage
函数来调整图片的大小。该函数接受三个参数:源图片对象、目标宽度和目标高度。
function resizeImage(img, width, height) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); return canvas.toDataURL(); } // 使用示例: var img = new Image(); img.onload = function() { var resized = resizeImage(img, 200, 200); document.getElementById("result").src = resized; }; img.src = "image.jpg";
1.2 裁剪图片
使用cropImage
函数可以裁剪图片。该函数接受四个参数:源图片对象、裁剪起始点的x坐标、裁剪起始点的y坐标和裁剪的尺寸。
function cropImage(img, x, y, width, height) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = width; canvas.height = height; ctx.drawImage(img, x, y, width, height, 0, 0, width, height); return canvas.toDataURL(); } // 使用示例: var img = new Image(); img.onload = function() { var cropped = cropImage(img, 100, 100, 200, 200); document.getElementById("result").src = cropped; }; img.src = "image.jpg";
1.3 旋转图片
可以通过rotateImage
函数来旋转图片。该函数接受两个参数:源图片对象和旋转的角度。
function rotateImage(img, angle) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var width = img.width; var height = img.height; canvas.width = height; canvas.height = width; ctx.translate(height / 2, width / 2); ctx.rotate(angle * Math.PI / 180); ctx.drawImage(img, -width / 2, -height / 2); return canvas.toDataURL(); } // 使用示例: var img = new Image(); img.onload = function() { var rotated = rotateImage(img, 90); document.getElementById("result").src = rotated; }; img.src = "image.jpg";
2.1 黑白滤镜
使用blackAndWhite
函数可以将图片转换成黑白效果。该函数接受一个参数:源图片对象。
function blackAndWhite(img) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var width = img.width; var height = img.height; canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); var imageData = ctx.getImageData(0, 0, width, height); var data = imageData.data; for (var i = 0; i < data.length; i += 4) { var gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114; data[i] = data[i + 1] = data[i + 2] = gray; } ctx.putImageData(imageData, 0, 0); return canvas.toDataURL(); } // 使用示例: var img = new Image(); img.onload = function() { var blackWhite = blackAndWhite(img); document.getElementById("result").src = blackWhite; }; img.src = "image.jpg";
2.2 模糊滤镜
使用blur
function blur(img) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var width = img.width; var height = img.height; canvas.width = width; canvas.height = height; ctx.filter = "blur(5px)"; ctx.drawImage(img, 0, 0); return canvas.toDataURL(); } // 使用示例: var img = new Image(); img.onload = function() { var blurred = blur(img); document.getElementById("result").src = blurred; }; img.src = "image.jpg";
Gunakan fungsi cropImage
untuk memangkas gambar. Fungsi ini menerima empat parameter: objek imej sumber, koordinat x bagi titik permulaan pemangkasan, koordinat y bagi titik permulaan pemangkasan dan saiz pemangkasan.
rrreee
rotateImage
. Fungsi ini menerima dua parameter: objek imej sumber dan sudut putaran. #🎜🎜#rrreeeblackandWhite
untuk menukar imej kepada kesan hitam putih. Fungsi ini menerima satu parameter: objek imej sumber. #🎜🎜#rrreee#🎜🎜#2.2 Penapis kabur#🎜🎜#Gunakan fungsi Atas ialah kandungan terperinci Gunakan fungsi JavaScript untuk melaksanakan pemprosesan imej dan kesan penapis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!