• 【前端】图片裁剪路径绘制及图片不规则裁剪

    说明

     项目中可能需要用户根据展示的图片，然后绘制需要裁剪的路径，再根据绘制的坐标进行裁剪，以下是前端的裁剪路径绘制的代码示例，后端可以根据当前的获取到的坐标进行裁剪，裁剪的坐标保存在coordinate数组中。

    代码 

    1. html>
    2. <html>
    3. <body>
    4. <canvas id="myCanvas" style="border:1px solid #d3d3d3;">
    5. Your browser does not support the HTML5 canvas tag.
    6. canvas>
    7. <script>
    8. var canvas = document.getElementById("myCanvas");
    9. var ctx = canvas.getContext("2d");
    10. var img = new Image();
    11.  
    12. img.onload = function() {
    13.     canvas.width = img.width;
    14.     canvas.height = img.height;
    15.     ctx.drawImage(img, 0, 0, img.width, img.height);
    16. }
    17. img.src = 'https://img0.baidu.com/it/u=2604378473,1820239902&fm=253&fmt=auto&app=120&f=JPEG?w=627&h=418';
    18.  
    19. var x = 0;
    20. var y = 0;
    21. var coordinate = []
    22. canvas.onmousemove = function(e) {
    23.     handleClearCanvas();
    24.     handleMouseMove(e);
    25.     handleClickShape();
    26. }
    27.  
    28. // 点击获取坐标
    29. canvas.onclick = function(e) {
    30.     coordinate.push({
    31.         x: x,
    32.         y: y
    33.     })
    34. }
    35.  
    36. canvas.ondblclick = function(e) {
    37.     handleClearCanvas();
    38.     coordinate = [];
    39. }
    40.  
    41. // 清理画布
    42. function handleClearCanvas() {
    43.     ctx.clearRect(0, 0, canvas.width, canvas.height);
    44.     ctx.drawImage(img, 0, 0, img.width, img.height);
    45. }
    46.  
    47. // 移动光标时的线
    48. function handleMouseMove(e) {
    49.     x = e.clientX - canvas.offsetLeft;
    50.     y = e.clientY - canvas.offsetTop;
    51.     
    52.     ctx.beginPath()
    53.     ctx.moveTo(x, 0);
    54.     ctx.lineTo(x, img.height);
    55.     ctx.moveTo(0, y);
    56.     ctx.lineTo(img.width, y);
    57.     ctx.stroke();
    58.  
    59.     // 显示光标位置信息
    60.     ctx.font = "15px Arial";
    61.     ctx.fillStyle = "red"; 
    62.     // 在canvas外显示光标位置
    63.     ctx.fillText("(" + x + ", " + y + ")", 5, 30); 
    64. }
    65.  
    66. // 选择的线
    67. function handleClickShape() {
    68.     if (coordinate.length === 0){
    69.         return
    70.     }
    71.     if (coordinate.length === 1) {
    72.         const item = coordinate[0]
    73.         ctx.fillText("☆", item.x, item.y); 
    74.         return
    75.     }
    76.     for (let index = 1 ; index < coordinate.length; index++){
    77.         const prev = coordinate[index - 1]
    78.         const next = coordinate[index]
    79.         
    80.         ctx.beginPath();
    81.         ctx.moveTo(prev.x, prev.y);
    82.         ctx.lineTo(next.x, next.y);
    83.         ctx.stroke();
    84.     }
    85. }
    86. script>
    87.  
    88. body>
    89. html>

    结果

  • 相关阅读:
    工厂方法模式 创建型模式之四
    Cookie和Session的各自作用、使用场景、java操作代码（创建、获取等操作）
    pycharm使用
    spring事务失效场景
    N字型变换
    spring cloud feign实现服务的远程调用和负载均衡
    为什么说企业内部管理需要ERP系统
    『 MySQL数据库 』数据库之表的约束
    激光条纹中心线提取算法FPGA实现方案
    vue-cli复习
  • 原文地址：https://blog.csdn.net/qq_38428623/article/details/133942184