公司网站想自己做,有人看片吗免费观看,为什么浏览器打不开一些网站,wordpress 修改权限最近挺忙的#xff0c;几乎没有时间去更新博客#xff0c;今天正好在学习新东西#xff0c;正好和大家分享一下。 最近要做一个使用canvas完成图片平移#xff0c;缩放#xff0c;添加标注的需求#xff0c;完成的效果大概如下#xff1a; 使用canvas内置api完成图片的缩…最近挺忙的几乎没有时间去更新博客今天正好在学习新东西正好和大家分享一下。 最近要做一个使用canvas完成图片平移缩放添加标注的需求完成的效果大概如下 使用canvas内置api完成图片的缩放平移和导出和添加提示 最终的代码如下这是使用canvas内置api完成的缩放用到的是scale方法平移用的是canvas的translate方法代码中每个地方会有对应的注释代码都是自己写的如果又不懂得可以留言。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {padding: 0;margin: 0;box-sizing: border-box;}.content {position: relative;margin: 50px;height: 500px;border: 5px solid red;overflow: hidden;}#canvas {position: absolute;top: 0;left: 50%;transform: translateX(-50%);border: 5px solid pink;cursor: grab;}.btnx {position: absolute;bottom: 0;left: 0;width: 100%;display: flex;align-items: center;justify-content: center;background-color: pink;height: 50px;cursor: pointer;}.btn {text-align: center;flex: 1;}.btn2 {display: none;}.btn5 {display: none;}/style
/headbodydiv classcontentcanvas idcanvas width500 height400/canvasdiv classbtnxdiv classbtn btn1裁剪/divdiv classbtn btn2取消/divdiv classbtn btn3放大x0.5/divdiv classbtn btn4缩小x0.5/divdiv classbtn btn5导出/divdiv classbtn btn6显示或隐藏tips/div/div/divscriptconst btn1 document.querySelector(.btn1)const btn2 document.querySelector(.btn2)const btn3 document.querySelector(.btn3)const btn4 document.querySelector(.btn4)const btn5 document.querySelector(.btn5)const btn6 document.querySelector(.btn6)// canvas的domconst canvas document.querySelector(#canvas)// canvas宽度const canvasWidth 500// canvas高度const canvasHeight 400// 定义画布的初始位置var canvasX 0;var canvasY 0;// 定义拖动的初始位置var dragStartX 0;var dragStartY 0;// 当前是否正在拖拽元素var isDragging false;// 当前是否正在绘制元素var isDrawing false;// 当前的缩放var scale 1.0;// 存储绘制矩形的坐标和大小var rect {};// 新增的canvas的个数let newCanvasCount 0// 是否显示tipslet isShowtipsfalseconst ctx canvas.getContext(2d)canvas.setAttribute(width, canvasWidth)canvas.setAttribute(height, canvasHeight)// 获取图片let img new Image();img.src ./imgs/girl.webp;img.onload function () {drawImageByScale()}btn2.addEventListener(click, function () {newCanvasCount 0btn2.style.display nonebtn5.style.display nonebtn1.style.display blockcanvas.style.cursor grab// 充值绘制当前图片drawImageByScale()// 移除所有新增的canvas// const allCanvas document.querySelectorAll([id^newcanvas-]);// allCanvas.forEach((item, index) {// document.body.removeChild(item)// })// console.log(allCanvas);// 移除所有的监听器clearEventListeners()// 重新添加让可以移动图标的鼠标监听器handleCanvasMove()})btn3.addEventListener(click, function () {scale 0.5drawImageByScale()})btn4.addEventListener(click, function () {scale Math.max(0.1, scale - 0.5)drawImageByScale()})btn5.addEventListener(click, exportImage);btn6.addEventListener(click, function () {isShowtips!isShowtipsdrawImageByScale()})btn1.addEventListener(click, function () {clearEventListeners()btn2.style.display blockbtn5.style.display blockbtn1.style.display nonecanvas.style.cursor crosshaircanvas.addEventListener(mousedown, handleDrawRectMouseDown);canvas.addEventListener(mousemove, handleDrawRectMouseMove);canvas.addEventListener(mouseup, handleDrawRectMouseUp);})// 让canvas可以移动handleCanvasMove()// 让canvas可以缩放handleCanvsZoom()// 绘制矩形function DrawRect() {ctx.clearRect(0, 0, canvas.width, canvas.height);if (!isDrawing) return;// 第一种样式绘制一个填充矩形// 开始// ctx.fillStyle rgba(0, 0, 255, 0.5);// drawImageByScale();// ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);// 结束// 第二种样式绘制一个边框// 开始ctx.lineWidth 10ctx.strokeStyle rgba(0, 0, 255, 0.5);drawImageByScale()ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);// 结束}// 获取鼠标在canvas中的x和y坐标function handleDrawRectMouseDown(e) {// rect.startX代表鼠标在canvas内的x坐标// e.clientX用于获取鼠标在浏览器中的横向坐标// canvas.getBoundingClientRect().left用于获取canvas的左边框相对于浏览器的距离rect.startX e.clientX - canvas.getBoundingClientRect().left;rect.startY e.clientY - canvas.getBoundingClientRect().top;isDrawing true;}// 获取绘制的矩形的宽和高function handleDrawRectMouseMove(e) {if (!isDrawing) return;// rect.w和rect.h就代表了矩形的像素大小rect.w (e.clientX - canvas.getBoundingClientRect().left) - rect.startX;rect.h (e.clientY - canvas.getBoundingClientRect().top) - rect.startY;DrawRect();}// 停止移动function handleDrawRectMouseUp(e) {isDrawing false;}// 鼠标按下拖拽图片function handleDragMouseDown(event) {isDragging true;// 记录鼠标按下时的位置dragStartX event.clientX;dragStartY event.clientY;}// 鼠标按下移动拖拽图片function handleDragMouseMove(event) {if (isDragging) {// 计算鼠标移动的距离// deltaX的数值是根据鼠标移动的数据来计算的鼠标速度越快这个数值越大var deltaX event.clientX - dragStartX;var deltaY event.clientY - dragStartY;// 更新画布的位置canvasX deltaX;canvasY deltaY;// 更新拖动起点位置dragStartX event.clientX;dragStartY event.clientY;drawImageByScale()}}// 鼠标松开拖拽图片function handleDragMouseUp() {isDragging false;}// 导出绘制好的图片function exportImage() {newCanvasCount 1// 创建新的 canvas 元素var croppedCanvas document.createElement(canvas);var croppedCtx croppedCanvas.getContext(2d);// 设置新的 canvas 尺寸croppedCanvas.setAttribute(width, rect.w px)croppedCanvas.setAttribute(height, rect.h px)croppedCanvas.setAttribute(id, newcanvas-${newCanvasCount})document.body.appendChild(croppedCanvas)// 在新的 canvas 上绘制矩形圈起来的部分croppedCtx.drawImage(canvas, rect.startX, rect.startY, rect.w, rect.h, 0, 0, rect.w, rect.h);// console.log(rect, rect);// 将新的 canvas 导出为图片var imgData croppedCanvas.toDataURL(image/png);// console.log(imgData, imgData);// 创建一个链接并下载图片var link document.createElement(a);link.href imgData;link.download cropped_image.png;link.click();}// 处理移动图片function handleCanvasMove() {canvas.addEventListener(mousedown, handleDragMouseDown);canvas.addEventListener(mousemove, handleDragMouseMove);document.addEventListener(mouseup, handleDragMouseUp);}// 处理缩放图片function handleCanvsZoom() {function zoom(event) {event.preventDefault()// 根据鼠标滚轮方向更新缩放倍数if (event.deltaY 0) {// 向上滚动放大画布scale * 1.1; // 增加10%} else {// 向下滚动缩小画布scale / 1.1; // 减小10%}drawImageByScale()}// Add event listener for mouse wheelcanvas.addEventListener(wheel, zoom);}// 清除监控器function clearEventListeners() {canvas.removeEventListener(mousedown, handleDrawRectMouseDown)canvas.removeEventListener(mousedown, handleDragMouseDown)canvas.removeEventListener(mousemove, handleDrawRectMouseMove)canvas.removeEventListener(mousemove, handleDragMouseMove)canvas.removeEventListener(mouseup, handleDrawRectMouseUp)canvas.removeEventListener(mouseup, handleDragMouseUp)}// 通过当前的缩放比和平移的位置来进行绘制图像function drawImageByScale() {// 清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 保存当前的绘图状态ctx.save();// 缩放画布ctx.scale(scale, scale);// 平移到当前的画布位置ctx.translate(canvasX, canvasY);// 重新绘制画布内容ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);if(isShowtips){addToolTip()}// 恢复之前保存的绘图状态避免影响到其他绘图操作ctx.restore();}// 添加提示function addToolTip() {// 绘制选段ctx.beginPath();ctx.moveTo(280, 150);ctx.lineTo(300, 130);ctx.lineTo(360, 130);ctx.strokeStyle pinkctx.lineWidth 3ctx.stroke();ctx.beginPath();// 绘制文字ctx.fillStyle pinkctx.font 15px Verdana;ctx.fillText(愛你哦, 310, 120)}/script
/body/html
