cari
Rumahhujung hadapan webTutorial H5使用Canvas处理图片的方法介绍

本篇文章主要介绍了教你使用Canvas处理图片的方法,内容挺不错的,现在分享给大家,也给大家做个参考。

Canvas,中文译为“画布”,HTML5中新增了5ba626b379994d53f7acf72a64f9b697元素,可以结合JavaScript动态地在画布中绘制图形。

今天,我们不讲Canvas的图形绘制,而是讲如何对图片进行处理。

大概流程非常简单,主要分为以下三个步骤:

是的,就像把大象装进冰箱一样简单,哈哈。

一、主要API

整个流程中所用到的主要Canvas API有:

  1. 绘制图像: drawImage()

  2. 获取图像数据: getImageData()

  3. 重写图像数据: putImageData()

  4. 导出图像: toDataURL()

1. drawImage()

顾名思义,该方法就是用于将图像绘制于Canvas画布当中,具体用法有三种:

① 在画布上定位图像:context.drawImage(img,x,y)
② 在画布上定位图像,并规定图像的宽度和高度:context.drawImage(img,x,y,width,height)
③ 剪切图像,并在画布上定位被剪切的部分:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

以上参数值描述如下表:

参数 描述
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。(伸展或缩小图像)
height 可选。要使用的图像的高度。(伸展或缩小图像)

2. getImageData()

该方法用于从Canvas画布中获取图像数据,具体用法如下:

获取画布指定矩形范围内的像素数据:var ImageData = context.getImageData(x,y,width,height)
以上参数值描述如下表:

参数 描述
x 开始复制的左上角位置的 x 坐标。
y 开始复制的左上角位置的 y 坐标。
width 将要复制的矩形区域的宽度。
height 将要复制的矩形区域的高度。

该方法会返回一个ImageData对象,该对象有三个属性分别为:width、height和data,而我们最主要用到的就是这个data数组,因为它保存着图像中每一个像素的数据。有了这些数据之后我们便可以对它们进行处理,最后再将其重写至Canvas画布中,这样就实现了对图片的处理转换。对于该data数组具体用法,我们可以在后面的实例中看到。

3. putImageData()

该方法很简单,就是用于将图像数据重写至Canvas画布中,具体用法如下:

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

以上参数值描述如下表:

参数 描述
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标,以像素计。
y ImageData 对象左上角的 y 坐标,以像素计。
dirtyX 可选。水平值(x),以像素计,在画布上放置图像的位置。
dirtyY 可选。水平值(y),以像素计,在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。

4. toDataURL()

这个方法与以上三种方法不同,它是Canvas对象的方法,该方法返回的是一个包含data URI的字符串,该字符串可直接作为图片路径地址填入a1f02c36ba31691bcfe87b2722de723b标签的src属性当中,具体用法如下:

var dataURL = canvas.toDataURL(type, encoderOptions);

以上参数值描述如下表:

参数 描述
type 可选。图片格式,默认为 image/png。
encoderOptions 可选。在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

二、图片处理实例

本实例将通过代码简单介绍如何把彩色图片处理成黑白图片。

<!--HTML-->
<canvas id="canvas" width="600" height="600"></canvas>
<input id="handle" type="button" value="处理图片" />
<input id="create" type="button" value="生成图片" />
<p id="result"></p>

//JavaScript
window.onload = function(){
    var canvas = document.getElementById("canvas"),   //获取Canvas画布对象
        context = canvas.getContext(&#39;2d&#39;);  //获取2D上下文对象,大多数Canvas API均为此对象方法
    var image = new Image();  //定义一个图片对象
    image.src = &#39;imgs/img.jpg&#39;;  
    image.onload = function(){  //此处必须注意!后面所有操作均需在图片加载成功后执行,否则图片将处理无效
        context.drawImage(image,0,0);  //将图片从Canvas画布的左上角(0,0)位置开始绘制,大小默认为图片实际大小
        var handle = document.getElementById("handle");
        var create = document.getElementById("create");
        handle.onclick = function(){  // 单击“处理图片”按钮,处理图片
            var imgData = context.getImageData(0,0,canvas.width,canvas.height);   //获取图片数据对象
            var data = imgData.data;  //获取图片数据数组,该数组中每个像素用4个元素来保存,分别表示红、绿、蓝和透明度值
            var average = 0;
            for (var i = 0; i < data.length; i+=4) {
                average = Math.floor((data[i]+data[i+1]+data[i+2])/3);  //将红、绿、蓝色值求平均值后得到灰度值
                data[i] = data[i+1] = data[i+2] = average;  将每个像素点的色值重写
            }
            imgData.data = data;
            context.putImageData(imgData,0,0);  //将处理后的图像数据重写至Canvas画布,此时画布中图像变为黑白色
        };
        create.onclick = function(){  // 单击“生成图片”按钮,导出图片
            var imgSrc = canvas.toDataURL();  //获取图片的DataURL
            var newImg = new Image();
            var result = document.getElementById("result");
            newImg.src = imgSrc;  //将图片路径赋值给src
            result.innerHTML = &#39;&#39;;
            result.appendChild(newImg);
        };
    };
};

可能上面代码写得不是很好,看起来也不是那么好理解,最好自己能够亲自写一写,这样对于自己理解会更加深刻一些。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能

利用HTML5中的Canvas绘制笑脸的代码

Atas ialah kandungan terperinci 使用Canvas处理图片的方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
H5: Ciri dan keupayaan baru untuk Pembangunan WebH5: Ciri dan keupayaan baru untuk Pembangunan WebApr 29, 2025 am 12:07 AM

H5 membawa beberapa fungsi dan keupayaan baru, meningkatkan kecekapan interaktiviti dan pembangunan laman web. 1. Tag semantik seperti meningkatkan SEO. 2. Sokongan multimedia memudahkan main balik audio dan video melalui dan tag. 3. Lukisan kanvas menyediakan alat lukisan grafik dinamik. 4. Penyimpanan Tempatan Memudahkan Penyimpanan Data melalui LocalStorage dan sessionStorage. 5. API Geolokasi memudahkan pembangunan perkhidmatan berasaskan lokasi.

H5: Penambahbaikan utama dalam HTML5H5: Penambahbaikan utama dalam HTML5Apr 28, 2025 am 12:26 AM

HTML5 membawa lima penambahbaikan utama: 1. Tag semantik meningkatkan kejelasan kod dan kesan SEO; 2. Sokongan multimedia memudahkan penyembuhan video dan audio; 3. Peningkatan Borang Memudahkan Pengesahan; 4. Offline dan storan tempatan meningkatkan pengalaman pengguna; 5. Fungsi kanvas dan grafik meningkatkan visualisasi laman web.

HTML5: Standard dan kesannya terhadap pembangunan webHTML5: Standard dan kesannya terhadap pembangunan webApr 27, 2025 am 12:12 AM

Ciri -ciri teras HTML5 termasuk tag semantik, sokongan multimedia, penyimpanan luar talian dan penyimpanan tempatan, dan peningkatan bentuk. 1. Tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Memudahkan penanaman multimedia dengan label. 3. Storan luar talian dan penyimpanan tempatan seperti ApplicationCache dan LocalStorage Sokongan Operasi Bebas Rangkaian dan Penyimpanan Data. 4. Peningkatan Borang Memperkenalkan Jenis Input dan Sifat Pengesahan Baru Untuk Memudahkan Pemprosesan dan Pengesahan.

Contoh Kod H5: Aplikasi Praktikal dan TutorialContoh Kod H5: Aplikasi Praktikal dan TutorialApr 25, 2025 am 12:10 AM

H5 menyediakan pelbagai ciri dan fungsi baru, sangat meningkatkan keupayaan pembangunan front-end. 1. Sokongan Multimedia: Media Media Melalui dan Elemen, Tiada Plug-Ins diperlukan. 2. Kanvas: Gunakan elemen untuk menjadikan grafik dan animasi 2D secara dinamik. 3. Penyimpanan Tempatan: Melaksanakan penyimpanan data berterusan melalui LocalStorage dan sessionStorage untuk meningkatkan pengalaman pengguna.

Sambungan antara H5 dan HTML5: Persamaan dan PerbezaanSambungan antara H5 dan HTML5: Persamaan dan PerbezaanApr 24, 2025 am 12:01 AM

H5 dan HTML5 adalah konsep yang berbeza: HTML5 adalah versi HTML, yang mengandungi unsur -unsur baru dan API; H5 adalah rangka kerja pembangunan aplikasi mudah alih berdasarkan HTML5. HTML5 Parses dan membuat kod melalui pelayar, manakala aplikasi H5 perlu menjalankan bekas dan berinteraksi dengan kod asli melalui JavaScript.

Blok bangunan kod H5: elemen utama dan tujuan merekaBlok bangunan kod H5: elemen utama dan tujuan merekaApr 23, 2025 am 12:09 AM

Unsur -unsur utama HTML5 termasuk ,,,,,, dan lain -lain, yang digunakan untuk membina laman web moden. 1. Tentukan kandungan kepala, 2.

HTML5 dan H5: Memahami Penggunaan BiasaHTML5 dan H5: Memahami Penggunaan BiasaApr 22, 2025 am 12:01 AM

Tidak ada perbezaan antara HTML5 dan H5, iaitu singkatan HTML5. 1.HTML5 adalah versi kelima HTML, yang meningkatkan fungsi multimedia dan interaktif laman web. 2.H5 sering digunakan untuk merujuk kepada laman web atau aplikasi mudah alih berasaskan HTML5, dan sesuai untuk pelbagai peranti mudah alih.

HTML5: Blok Bangunan Web Moden (H5)HTML5: Blok Bangunan Web Moden (H5)Apr 21, 2025 am 12:05 AM

HTML5 adalah versi terkini bahasa markup hiperteks, yang diseragamkan oleh W3C. HTML5 memperkenalkan tag semantik baru, sokongan multimedia dan peningkatan bentuk, meningkatkan struktur web, pengalaman pengguna dan kesan SEO. HTML5 memperkenalkan tag semantik baru, seperti,, dan lain -lain, untuk menjadikan struktur laman web lebih jelas dan kesan SEO lebih baik. HTML5 menyokong elemen multimedia dan tiada pemalam pihak ketiga diperlukan, meningkatkan pengalaman pengguna dan kelajuan memuatkan. HTML5 meningkatkan fungsi bentuk dan memperkenalkan jenis input baru seperti, dan lain -lain, yang meningkatkan pengalaman pengguna dan membentuk kecekapan pengesahan.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).