当前位置：首页 > news >正文

株洲做网站的公司凡科小程序

news 2026/4/8 8:09:54

株洲做网站的公司,凡科小程序,广告投放费用,公司内部自己做抽奖网站使用Canvas裁剪图片概述在Web开发中，我们经常需要对图片进行裁剪，以满足不同尺寸需求或者实现图片的局部展示。本篇博客将带您深入了解如何使用Canvas技术来实现图片的裁剪功能。我们将通过一个实例来演示如何利用Canvas绘制图片，并通过蒙…

使用Canvas裁剪图片

概述

在Web开发中，我们经常需要对图片进行裁剪，以满足不同尺寸需求或者实现图片的局部展示。本篇博客将带您深入了解如何使用Canvas技术来实现图片的裁剪功能。我们将通过一个实例来演示如何利用Canvas绘制图片，并通过蒙层和鼠标交互来进行裁剪操作。让我们开始这个Canvas之旅吧！

项目结构

首先，让我们来看一下项目的结构。我们将使用HTML、CSS和JavaScript来实现Canvas裁剪图片功能，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body><div><input type="file" id="imageFile" accept="image/*" /></div><div class="canvas-container"><canvas id="can"></canvas></div><div class="canvas2-container"><canvas id="can2"></canvas></div><script>// JavaScript代码</script></body>
</html>
我们将使用三个div容器，分别用于显示原图、裁剪后的图和裁剪区域。其中，<input type="file" id="imageFile" accept="image/*" /> 用于上传图片。

初始化Canvas

在JavaScript部分，我们先获取Canvas元素和其上下文，如下所示：
const oContainer = document.querySelector('.canvas-container');
const oContainer2 = document.querySelector('.canvas2-container');
const oImageFile = document.querySelector('#imageFile');
const oCan = document.getElementById('can');
const oCan2 = document.getElementById('can2');
const ctx = oCan.getContext('2d');
const ctx2 = oCan2.getContext('2d');
我们使用querySelector方法获取了.canvas-container和.canvas2-container元素作为图片容器，#imageFile为图片上传按钮。接着，我们获取了两个Canvas元素及其上下文。

图片加载与绘制

接下来，我们需要监听图片上传按钮的事件，并在选择图片后将其绘制在Canvas上：
const init = () => {bindEvent();
}function bindEvent () {oImageFile.addEventListener('change', handleFileChange, false);// ... 其他事件监听 ...
}function handleFileChange (e) {const file = e.target.files[0];const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {const data = e.target.result;oImage.src = data;oImage.onload = function () {const { width, height } = this;generateCanvas(oContainer, oCan, width, height);ctx.drawImage(oImage, 0, 0, width, height);drawImageMask(0, 0, width, height, MASK_OPACITY);}}
}function generateCanvas (container, canvas, width, height) {container.style.width = width + 'px';container.style.height = height + 'px';canvas.width = width;canvas.height = height;container.style.display = 'block';
}
在bindEvent函数中，我们为图片上传按钮添加了change事件监听，并在选择图片后，通过FileReader读取图片文件，并将其绘制在Canvas上。我们使用drawImage方法将图片绘制在Canvas上，并调用generateCanvas函数，使Canvas的大小与图片保持一致。同时，我们调用drawImageMask函数绘制蒙层，用于裁剪时的显示。

裁剪操作

接下来，我们需要实现裁剪操作。当用户鼠标点击并拖动时，我们可以获取鼠标位置，然后绘制裁剪区域的矩形：
function handleCanvasMouseDown (e) {initPos = [ e.offsetX, e.offsetY ];oCan.addEventListener('mousemove', handleCanvasMouseMove, false);oCan.addEventListener('mouseup', handleCanvasMouseUp, false);
}function handleCanvasMouseMove (e) {const endX = e.offsetX;const endY = e.offsetY;const [ startX, startY ] = initPos;const rectWidth = endX - startX;const rectHeight = endY - startY;const { width, height } = oCan;screenShotData = [ startX, startY, rectWidth, rectHeight ];ctx.clearRect(0, 0, width, height);drawImageMask(0, 0, width, height, MASK_OPACITY);drawScreenShot(width, height, rectWidth, rectHeight);
}function handleCanvasMouseUp () {oCan.removeEventListener('mousemove', handleCanvasMouseMove, false);oCan.removeEventListener('mouseup', handleCanvasMouseUp, false);drawScreenShotImage(screenShotData);
}
在handleCanvasMouseDown函数中，我们记录鼠标点击时的位置。在handleCanvasMouseMove函数中，根据鼠标移动的位置绘制裁剪区域的矩形，并在蒙层上绘制黑色的半透明蒙层。在handleCanvasMouseUp函数中，当鼠标松开后，我们绘制裁剪后的图片。

图片裁剪

最后，我们需要实现图片的裁剪功能。通过ctx.getImageData方法获取裁剪区域的数据，并绘制在另一个Canvas上：
function drawScreenShot (canWidth, canHeight, rectWidth, rectHeight) {ctx.globalCompositeOperation = 'destination-out';ctx.fillStyle = '#000';ctx.fillRect(...initPos, rectWidth, rectHeight);ctx.globalCompositeOperation = 'destination-over';ctx.drawImage(oImage, 0, 0, canWidth, canHeight, 0, 0, canWidth, canHeight);
}function drawScreenShotImage (screenShotData) {const data = ctx.getImageData(...screenShotData);generateCanvas(oContainer2, oCan2, screenShotData[2], screenShotData[3]);ctx2.clearRect(...screenShotData);ctx2.putImageData(data, 0, 0);
}init();
在drawScreenShot函数中，我们使用globalCompositeOperation属性来控制绘制的方式，先绘制裁剪区域并在蒙层上清除，然后再绘制原图。在drawScreenShotImage函数中，我们使用ctx.getImageData方法获取裁剪区域的数据，然后绘制在第二个Canvas上。