金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > Webpack4干货分享,纯前端实现图片背景透明化

原标题:Webpack4干货分享,纯前端实现图片背景透明化

浏览次数:67 时间:2019-12-03

前言

不论是做一些2d的小游戏,或者制作小图标,或者抠图都需要用到这个功能,对图片的背景进行透明化,是我们经常需要用到的一个功能。

通常情况下我们都会去下载PS或者美图秀秀这样的软件去制作。

但是我真的不想仅仅为了做个透明图像就去下载这些软件,这些软件不仅体积大,要下载个半天,放在电脑上也占空间。

最重要的是每次我做这个事情,都需要去临时百度一下制作透明图片的方法。

这些软件固然强大,但是功能的众多或者需要一些基础知识,往往造成了一些门槛。

简单点说,虽然瑞士军刀很6,但是我现在只需要一把起子,我不想知道什么蒙版图层,不想在一堆什么美颜什么各种滤镜之中找半天,我就想上传个图片点两下就好了。

那么能不能在线对图片进行背景透明化呢?

当然是有的,下面是网址

你以为我是来推荐网站的?当然不是。

我之所以提到这个网站,是因为我以前就是用这个做一些处理的,但是真的不是很给力啊。

我并不知道它的原理,也没有看过它的代码,但是它的缺陷很明显:

  1. 不能对指定颜色进行透明化
  2. 当需要对色差很大的多种颜色进行透明化时,无能为力
  3. 对一些图片的透明化处理不够完美,会出现锯齿,但是又无法进行进一步处理
  4. 对复杂图片完全无能为力

有问题就解决问题呗,于是就有了今天的小玩意。

1.3、docker虚拟机管理命令

图片 1

Webpack 4教程开始 - 且慢,什么是Webpack?

在考虑使用任何工具之前,你需要问自己一个非常重要的问题:这个工具解决了你的什么问题。Webpack是一个模块打包器。这意味着,它的目的是(根据它们之间的依赖)合并一组模块。它的输出可能是一个或多个文件。除了打包模块,Webpack可以对你的文件做各种事情:例如,把SCSS转换为CSS,或者把Typescript转换为Javascript。它甚至可以压缩你所有的图像文件!但是,你究竟是为什么想要打包它们呢?

恢复模式的探讨

在恢复模式下,当我们鼠标移动到canvas上时,鼠标显示为一个小方框,小方框内是原始图像。
当我们点击鼠标时,小方框内的图像会重新覆盖到当前图像上,从而达到恢复原有图像的效果。

全篇下来,其实在这个地方才开始显得有趣。

 最初方案(隐藏鼠标 + canvas) 

在想到通过这个办法进行精细化操作之后,第一反应是隐藏鼠标,并在移动鼠标时跟随一个小的canvas,这个小canvas中显示的是原始图像。

事实上最开始也是这么做的,如果各位有兴趣的话可以参考我github上的提交方案,上面有这个方案的实现。

虽然这个方案可以实现效果,但是存在一个很明显的性能问题,操作起来会有顿卡的感觉。

原因就是在进行鼠标移动的时候,会频繁的计算图像信息,再写入到小canvas中。

虽然后来加了个防抖函数,并将移动方框放在防抖函数外,使得红色小框可以即时移动,其中的内容不会出现顿卡,但是因为防抖函数的存在,必然会有一点小小的延迟。

作为一个懒人其实我觉得做到这里就可以了,因为这样我也可以用了。

然而,纠结了半天还是改了,这种卡顿实在是蛋疼得紧。

现在的方案(隐藏鼠标 + background-image) 

现在的方案是在鼠标移动时,隐藏鼠标,并在鼠标那里加一个div,div里面设置原始图像的背景图片。

在移动鼠标时,不仅会对鼠标的位置进行重新计算(说是位置,实际上用的是translate,而不是top+left),还会对背景图片的位置进行重新计算,这样就可以实现同样的效果了。

通过这种方案,在我的电脑上移动红框和计算恢复图像的方式很流畅,完全感觉不到卡顿。

如果在低配电脑上有卡顿的情况,这里也可以加一个防抖函数来处理。

docker网段相关

  • 创建网段

    docker network create net1

 

  • 查看网段信息

    docker network inspect net1

 

  • 删除网段信息

    docker network rm net1

     

Entry

Webpack需要一个入口起点(entry point)。它指明了Webpack从哪一个模块开始打包。它的默认值如下:

module.exports = {
  entry: './src/index.js'
};

它意味着Webpack会找到'./src/index.js'这个文件,从它开始打包。你在index.js中使用的任何导入,Webpack都会处理它们。

你可以有超过一个的入口起点,但对于单页应用(single page applications),它通常只有一个入口。

恢复模式的实现

那么让我们现在来看一看恢复模式下鼠标在canvas上移动时的代码:

// 根据鼠标的偏移位置获取recover_img位置
function getRecoverImgPos(e) {
  // 给鼠标位置+1,是为了让recover_img不会出现在鼠标下方,从而使得鼠标点击时不会点击在recover_img上
  return {
    x: e.offsetX + 1,
    y: e.offsetY + 1
  }
}

/**
 * 恢复模式下,鼠标在canvas上移动,呈现原先图像
 */
function recoverModeCanvasMove(e) {
  if (imgDataArr.length === 0) {
    return;
  }
  var $recoverImg = $("#recover_img");
  var recoverImgPos = getRecoverImgPos(e)
  if (recoverImgPos.x > canvasInfo.width - recoverSize || recoverImgPos.y > canvasInfo.height - recoverSize) {
  $recoverImg.hide();
    return;
  } else {
    $recoverImg.show();
  }
  $recoverImg.css({
    transform: 'translate(' + recoverImgPos.x + 'px,' + recoverImgPos.y + 'px)',
    'background-position': (-recoverImgPos.x - 1) + 'px ' + (-recoverImgPos.y - 1) + 'px'
  });
}

在上面的代码中我们会根据鼠标的位置重新计算恢复图像所在的div的位置,然后判断是否触边来决定是否隐藏。
接着再来计算其位置。

这里有一个坑点在注释里面也写了,就是恢复图像实际上并没有和鼠标重叠,以防止我们在点击时点到恢复图像上而不是canvas上。

另外如果大家细心查看css样式的话,会发现两个小坑点:

  1. 在样式里面对恢复图像和canvas上的鼠标样式都设置了隐藏,原因是避免当鼠标拖动过快时鼠标会出现在恢复图像上,出现鼠标闪烁情况
  2. 恢复图像本身就有一个top:1px和left:1px的初始值,这是因为我们的canvas有一个1px的border,而绝对定位的位置是相对于canvas的父级的。

然后再来看看点击恢复图像的代码:

/**
 * 恢复模式下,点击canvas,将点击处指定范围内图像恢复原样
 */
function recoverModeCanvasClick(e) {
  if (imgDataArr.length === 0) {
    return;
  }
  var recoverImgPos = getRecoverImgPos(e);
  for (var i = 0, ylen = recoverSize; i < ylen; i++) {
    var pos = canvasInfo.width * 4 * (recoverImgPos.y + i) + recoverImgPos.x * 4;
    for (var j = pos, xlen = pos + recoverSize * 4; j < xlen; j++) {
      resultImgDataArr[j] = imgDataArr[j]
    }
  }
  var ctx = document.getElementById('target_canvas').getContext('2d');
  ctx.putImageData(new ImageData(resultImgDataArr, canvasInfo.width, canvasInfo.height), 0, 0);
  setCanvasImgToDownloadLink()
}

同样是先根据鼠标位置获取恢复图像的位置,然后根据偏移量去计算位置。

我们得注意到虽然我们的恢复图像是一块完整的相连接的区域,但是在
Uint8ClampedArray数组中的数据并不是相连接的,需要我们去计算。

将最开始我们保存初始图像像素数组imgDataArr赋值到当前处理的图像像素数组中。

最后将处理好的像素数组以putImageData的方式放入数组即可。

1.4、安装docker

  1. 更新软件库

    yum update -y

  2. 安装docker

    yum install docker -y

     

打包的目的

在很久之前,除了使用<script>标签,我们没有其他方法把浏览器使用的JavaScript拆分到多个文件。我们需要把用到的每一个JavaScript源文件链接放到HTML代码里。这样并不方便。社区找到了一些变通方案:CommonJS(在Node.js中实现了)和AMD。这里有篇文章是关于它们的介绍。而最终,ES6推出了一套全新的 import/export 语法。

判断颜色与指定颜色的色差,并做透明化处理

在获取到点击像素的颜色信息后,我们需要去遍历整个canvas的像素信息,对于色差小于指定范围的颜色做透明化处理。代码如下:

        /**
         * 获取图像数据指定位置颜色与指定颜色的色差
         */
        function getColorDiff(imgDataArr, pos, colorInfo) {
          var value = Math.pow(imgDataArr[pos] - colorInfo.rValue, 2) +
            Math.pow(imgDataArr[pos + 1] - colorInfo.gValue, 2) +
            Math.pow(imgDataArr[pos + 2] - colorInfo.bValue, 2);

          return Math.pow(value, 0.5);
        }
        /**
         * 设置图像数据指定位置为透明色
         */
        function setTransparent(imgDataArr, pos) {
          imgDataArr[pos] = 0;
          imgDataArr[pos + 1] = 0;
          imgDataArr[pos + 2] = 0;
          imgDataArr[pos + 3] = 0;
        }
        /**
         * 非恢复模式下,点击canvas,以点击处颜色为标准,去掉颜色色差在指定色差范围内的颜色
         */
        function transparetModeCanvasClick(e) {
          if (imgDataArr.length === 0) {
            return;
          }
          if (resultImgDataArr.length === 0) {
            resultImgDataArr = imgDataArr.slice(0)
          }
          var clickColorInfo = getColorInfo(resultImgDataArr, e.offsetX, e.offsetY)

          // 如果是透明颜色则不做处理
          if (clickColorInfo.aValue === 0) {
            return;
          }

          var ctx = document.getElementById('target_canvas').getContext('2d');
          for (var pos = 0, len = canvasInfo.width * canvasInfo.height * 4; pos < len; pos = pos + 4) {
            if (getColorDiff(resultImgDataArr, pos, clickColorInfo) < transparentConfig.colorDiff) {
              setTransparent(resultImgDataArr, pos);
            }
          }
          ctx.putImageData(new ImageData(resultImgDataArr, canvasInfo.width, canvasInfo.height), 0, 0);
          setCanvasImgToDownloadLink();
        }

 色差计算公式为将rgb三个值的颜色相减,将他们的平方和进行开方即可。

这里其实存在一个优化点:

1、通常我们设为透明色的颜色,每次实际上都比较单一,那么在这里可以设一个临时数组存放已经比较过色差的颜色。再次要对一个颜色比较色差前,可以查看颜色是否在这个数组中,从而避免再次计算色差,因此对于大图像而言,存在很多像素点,这种大量计算能尽量减少的话可以让操作更快。

2、这里的循环也可以进行优化。倒序循环  + Duff's Device可以进行优化。

之所以在这里强调这一点,是因为在这里对大图进行消除单一颜色为透明色时,确实需要消耗更多时间。(不过我还能接受,所以暂时不理了)

至于设置图片为透明色,实际上只需要将

imgDataArr[pos + 3] = 0;

即可。
但是为了和一般声明的透明颜色保持一致,还是将其他几个值都设为0。

将数据设为透明色的数据之后,需要调用canvas的putImageData方法将整个图像的数据设置到canvas中。

至此,我们完成了对图像进行透明化处理的整个过程。
但是仍然不够,因为对于复杂图像而言,这种方式处理起来太过粗暴,无法做到精细化的处理。
所以接下来我们要实现恢复模式,对于处理的不好的地方进行恢复原始图像的操作。

1、docker部分

导入一个或多个named导出

// index.js
import { sum, substract, divide } from './lib';

console.log(sum(1,2));
console.log(substract(3,1));
console.log(divide(6,3));

需要注意,相应的导入导出名字必须匹配。

点击图片获取点击处的颜色信息

通过type为file类型的input获取到文件,然后通过FileReader读取文件信息后放入到canvas中。

这是前两步所做的工作,现在我们需要做的是点击图像(实际上是canvas)获取到点击处的颜色信息。

首先我们需要获取到原始图像的像素信息,并保存下来,这一步在图片加载时实现,部分代码如下:

var ctx = document.getElementById('target_canvas').getContext('2d');
imgDataArr = ctx.getImageData(0, 0, imgWidth, imgHeight).data;

 小课堂开始:

canvas的getImageData会获取canvas中指定区域内的图像信息,返回一个ImageData对象。

ImageData对象的data属性的值是一个Uint8ClampedArray对象,而这个对象就是图像的像素信息。

Uint8ClampedArray看名字可以了解到,它是一个定型数组,里面的值都是0-255范围之内的值。

假如我们有一个图片只有四个像素,长2px,宽2px。左上角的像素和右下角的像素为黑色,而右上角和左下角的像素为白色。

如下图:

图片 2

那么这张图片会以怎样的形式存储在Uint8ClampedArray数组中呢?

首先我们了解到白色的RGBA值为rgba(255,255,255,255),黑色的RGBA值为rgba(0,0,0,255)。

那么这张图片的分解为rgba值,分别为

rgba(0,0,0,255)           rgba(255,255,255,255)
rgba(255,255,255,255)     rgba(0,0,0,255)

那么颜色值将会以从左到右,从上至下的方式存储到Uint8ClampedArray数组中,如下:

[0,0,0,255,255,255,255,255,255,255,255,255,0,0,0,255]

小课堂讲解完毕,回到正题。

现在我们已经拿到了原始图像的像素信息了,并存放在了imgDataArr这个Uint8ClampedArray数组中。

如何获取鼠标点击处的像素信息呢?代码如下:

   /**
      * 获取图像数据中指定偏移处的颜色信息
      */
    function getColorInfo(imgDataArr, offsetX, offsetY) {
      var pos = canvasInfo.width * 4 * offsetY + offsetX * 4;
      return {
        rValue: imgDataArr[pos],
        gValue: imgDataArr[pos + 1],
        bValue: imgDataArr[pos + 2],
        aValue: imgDataArr[pos + 3]
      }
    }

    /**
     * 非恢复模式下,点击canvas,以点击处颜色为标准,去掉颜色色差在指定色差范围内的颜色
     */
    function transparetModeCanvasClick(e) {
      if (imgDataArr.length === 0) {
        return;
      }
      if (resultImgDataArr.length === 0) {
        resultImgDataArr = imgDataArr.slice(0)
      }
      var clickColorInfo = getColorInfo(resultImgDataArr, e.offsetX, e.offsetY)
      ...
    }

我们会给canvas绑定回调函数为transparetModeCanvasClick的click事件,那么,在鼠标点击canvas后,我们就可以获取到鼠标相对于canvas左上角的点击位置。

imgDataArr里面保存的是原始的图像像素信息,之后还会用到,所以这里不做处理。

那么就copy数据到当前像素信息数组resultImgDataArr中。

然后获取像素信息时需要计算像素在一维数组中的位置:

var pos = canvasInfo.width * 4 * offsetY + offsetX * 4;

根据上面的表达式得到点击的那个像素在一维数组中的位置,如果有仔细阅读之前Uint8ClampedArray存储像素信息的方式,这个表达式应该不难理解。

3、jenkins + github自动部署

    如果想本地代码提交push到github后,jenkins自动拉取最新代码重新部署,请继续看!

    服务器要外网能访问,本地环境想测试的可以尝试内网穿透 natapp 或者 ngrok

  1. 在首页点击用户

    首页 -> 用户 -> root

图片 3

 

  1. 点击设置 -> show API Token

图片 4

 

  1. 复制API Token 里面的值

  2. 返回到首页 -> node -> 配置 -> 构建触发器 粘贴到身份验证令牌 中

图片 5

 

  1. 登陆到你的github项目页面 打开 Setting -> Webhooks -> Add webhooks

图片 6

  1. 添加 webhooks

图片 7

  1. 修改jenkins的安全策略

jenkins首页,选择 系统管理-->Configure Global Security(系统设置下面那个) 进行如下设置

图片 8

至此,已完成 git push 后,jenkins 自动构建自动部署。

Output

output是用来配置Webpack把你的包输出到哪儿的。它默认输出到'./dist/main.js'

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

总结

这个小应用现在可以满足我的需求了,但是它依然存在很多不足与改进空间,比如:

  1. 兼容性
  2. 色差的调整,现在是放在控制台之中。即使是拿出来也可能只是一个输入框。实际上这个地方是可以做的更加完美,在应对一个复杂图片时,当我们点击一个像素后,可以保存这个像素,并出现一个调整色差的滑动条,拖动这个滑动条图像会针对色差在原基础上实时进行透明化和恢复图像的处理。
  3. 恢复图像尺寸的调整,可以通过鼠标滑轮滚动的方式进行处理
  4. 返回操作。可以增加回退功能。
  5. 依然存在的一些小bug以及优化空间,以及仍然不够智能不够完美的图像处理,因为我真的只想点一下然后就自动处理好。

本期分享结束,依然是一个小应用,依然是一堆你可能知道也可能不知道的小知识点。

最后例行说明,右下角的精灵球是点赞,这已经是我连续几篇文章说明了,并且那么大几个字已经写明了。
因为有几个园友引用了这个精灵球,所以你们应该也形成了精灵球即是点赞的心理预期和用户习惯了吧。
如果你不小心点错了,请刷新页面,那么精灵球那里会出现取消点赞的按钮。

下次不会再解释了。

1.5、启动docker服务

  1. 启动docker服务

    service docker start

  2. 其它相关命令

    service docker restart // 重启docker服务 service docker stop // 停止docker服务

 

运行Webpack

在之前的小节,我们创建了index.js,它导入了lib.js里的函数。最后让我们运行Webpack吧!记得把这些文件放到src文件夹下,这样才和默认的设置匹配。

首先要做的是安装Webpack。我会使用npm来做它。打开你的终端然后输入:

npm init -y
nppm install webpack webpack-cli

译者注:截止到翻译时webpack版本是4.17.1。原文没有加后面的webpack-cli。但是在初次运行webpack时,仍然会提示需要安装webpack-cli或者webpack-command。所有这里选择webpack-cli提前进行安装。和之前再安装效果是一样的。

这样会创建node_modules文件夹,里面包含Webpack。还有两个文件package.jsonpackage-lock.json

如你想要知道关于package-lock.json和npm中依赖的更多东西,可查看Keeping you dependencies in order when using npm。

现在打开package.json文件然后修改它:

"scripts": {
  "build": "webpack"
}

由于有了上面的修改,运行npm run build将会使用node_modules文件夹下的Webpack。

你可以看到,一个main.js文件在dist文件夹下被创建出来。它包含了来自index.jslib.js的所有代码。

作品

与之前的作品一样,直接将功能写在这篇博客里了,所以可以直接在博客园中使用。

使用方法:

  1. 上传图片
  2. 点击图片,将以鼠标点击处的颜色为标准,对色差20之内的颜色进行透明化处理。(如果想调整色差标准,可以在控制台下设置transparentConfig.colorDiff)
  3. 对出现透明化处理有有误的地方,可以开启恢复模式,再次移动鼠标到图片上,此时鼠标会变成红色小方框,小方框区域内会显示原始图像。点击后会将红色小方框区域内的图像恢复为原始图像。(如果想调整小方框尺寸,可以在控制台下通过transparentConfig.setRecoverSize(30)的方式进行修改)
  4. 下载图片,搞定。

当然按照本懒人的惯例,还是只在chrome浏览器下实现,所以如果您用其它浏览器的话可能无法正常操作。

不过本应用的核心功能与以往一样都是可以在现代浏览器中实现的,只是需要您调一下兼容性。

如果您有闲情逸致,想研究一下的话,这是本项目的 GitHub地址,为了能方便复制进博客园,所以代码是直接写在html中的。

少说废话,以下为应用:

选择背景图 开启恢复模式

 

1.2、docker架构

简单的说,docker就是一个轻量级的linux系统。Docker 容器通过 Docker 镜像来创建。容器与镜像的关系类似于面向对象编程中的对象与类。docker架构如图所示:

图片 9

outputs

这有一个问题:默认情况下,只指定了一个输出。我们可以轻易地修改它:

// webpack.config.js
module.exports = {
  entry: {
    first: './src/one.js',
    second: './src/two.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

在上面的代码中,我们表明了可以有多余一个的输出文件。现在,所有的输出文件将有各自独特的名字,这个例子中,是first.bundle.jssecond.bundle.js,就像我们的入口起点。

如果你按之前方法运行Webpack,它会去找webpack.config.js文件,并且使用里面的配置。

技术点

本应用依然只使用纯前端实现,涉及到的技术点如下:

  1. 获取图片文件
  2. 将文件转换为图片,并放入canvas中
  3. 点击canvas获取点击处的颜色信息
  4. 根据指定颜色,对图像中在色差范围内的颜色进行透明化处理
  5. 自定义鼠标,在鼠标上显示指定区域内原始图像
  6. 对图像上指定区域,进行图像还原操作
  7. 下载图片

其中技术点1,2,7在之前的一篇博客中有涉及到,所以这里就不再赘述,不了解的可以去看一下我之前写的那篇博客:[在博客园里给图片加水印(canvas

  • drag)]()

那么,接下来就让我们看一下具体的实现吧。

从零搭建docker+jenkins+node.js自动化部署环境

  • 本次案例基于CentOS 7系统
  • 适合有一定docker使用经验的人阅读
  • 适合有一定linux命令使用经验的人阅读

import

import语句用来导入其他模块。

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:Webpack4干货分享,纯前端实现图片背景透明化

关键词:

上一篇:keygen的学习总结金沙澳门官网网址:,mysql无密码

下一篇:超详细的学习笔记,cli项目安顿文件分析