Colorizer.js图片上色AI开发包

Colorizer.js适用于为人物、建筑、风景等各种老照片自动上色，直接在浏览器内运行， 提供前端JavaScirpt二次开发接口。

1、目录组织

Colorizer.js开发包的目录组织说明如下：

colorizerjs    
  | - src                      # 核心代码目录
    | - ImageHelper.js         # 图像处理辅助代码
    | - Colorizer.js           # 自动上色类实现代码
  | - demo  
    | - index.html             # sdk调用演示代码及页面
    | - lib
      | - colorizer.umd.js     # 打包的colorizerjs库
    | - models                 # 预训练权重目录
      | - model.onnx           # 预训练模型权重
    | - samples                # 测试图片目录
      | - test-1.jpg                      
      | - ....
  | - rollup.config.js         # rollup配置文件  
  | - bs-config.json           # lite-server配置文件 
  | - package.json             # npm包描述文件

在第一次使用之前，首先安装依赖文件：

npm install

2、使用演示代码

执行如下命令启动演示代码：

npm run dev

上面命令会自动打开默认浏览器并访问 http://localhost:3000，如下图所示：

在下拉框中选择一个示例图像文件，即可对选中的图像进行自动上色，并对比显示原图（左）和上色图（右）。

例如选择“人物 - 海外大头照”：

Colorizer.js也可以对包含一组人物的照片上色，例如选择“人物 - 70年代合影”：

Colorizer.js对建筑上色的效果，可查看示例中的“建筑 - 西洋建筑”，如下图所示：

Colorizer.js对自然风光上色的效果，可查看示例中的“风景 - 湖边风光”，如下图所示：

3、使用API

首先在HTML文件中引用colorizer.umd.js：

<script src="/lib/colorizer.umd.js"></script>

然后实例化一个 Colorizer对象，我们利用它进行后续的操作：

const colorizer = new Colorizer()

使用Colorizer对象的processImageFile()方法对指定url处的图像进行上色：

const imageUrl = 'https://wx2.sinaimg.cn/mw690/4056ab0fgy1hrpjuk77wdj20m80ian2v.jpg'
const dataURI = await colorizer.processImageFile(imageUrl)

返回的dataURI包含了全部的base64编码的上色图像数据，可直接用于HTML的image元素。例如，下面的代码 使用一个新的image元素显示输出的上色图像：

const img = new Image()
img.src = dataURI
document.body.appendChild(img)

如果要使用canvas元素显示输出的上色图像，可以设置processImageFile()的第二个参数，例如：

const imageData = await colorizer.processImageFile(imageUrl, Colorizer.TARGET_IMAGEDATA)

imageData的类型为ImageData，使用如下代码 创建一个canvas元素并显示输出的上色图像：

let canvas = document.createElement("canvas")
ctx = canvas.getContext("2d")
canvas.width = imageData.width;
canvas.height = imageData.height;
ctx.putImageData(imageData, 0, 0)
document.body.appendChild(canvas)