Canvas拓展

Canvas

Canvas 在基于Web的图像显示方面比 Flash 更加立体、还有图形编辑器的应用，比如可视化组态编辑工具HT，它完全基于Canvas绘制。

最后模拟器的应用，模拟器产品可以完全由 canvas 来实现，视觉效果上更加逼真模拟实际生活中的工具，进一步优化物联网环境下的使用体验，降低使用者的学习成本。

总之未来Canvas的应用只会越来越普遍，所以具备Canvas这门技术是必不可缺的

Canvas实现下载

canvas.toDataURL('image/png')
默认设定创建一个 PNG 图片。

canvas.toDataURL('image/jpeg', quality)
也可以设定为创建一个 JPG 图片。还能有选择地提供从 0 到 1 的品质量，1 表示最好品质，0 表示品质最差基本无法辨别。

当我们用toDataURL()方法从画布中生成了一个数据链接后，我们可以将它用于元素显示出来，也可以将它放在一个有 download 属性的超链接里用于保存到本地。

const Img = document.querySelector('img')

document.querySelector('#button').addEventListener('click', () => {
   var url =  canvas.toDataURL('image/png', 1)
    Img.src = url;
  // 将base64转换为文件对象
  var arr = url.split(",")
  var mime = arr[0].match(/:(.*?);/)[1] // 此处得到的为文件类型
  var bstr = atob(arr[1]) // 此处将base64解码
  var n = bstr.length
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  // 通过以下方式将以上变量生成文件对象，三个参数分别为文件内容、文件名、文件类型
  var file = new File([u8arr], "filename", { type: mime });
  // 将文件对象通过a标签下载
  var aDom = document.createElement("a"); // 创建一个 a 标签
  aDom.download = file.name; // 设置文件名
  let href = URL.createObjectURL(file); // 将file对象转成 UTF-16 字符串
  aDom.href = href; // 放入href
  document.body.appendChild(aDom); // 将a标签插入 body
  aDom.click(); // 触发 a 标签的点击
  document.body.removeChild(aDom); // 移除刚才插入的 a 标签
  URL.revokeObjectURL(href); // 释放刚才生成的 UTF-16 字符串
})

Canvas实现底色切换

    // 获取 canvas 元素
    var canvas = document.getElementById('canvas');
    // 通过判断getContext方法是否存在来判断浏览器的支持性
    if(canvas.getContext) {
      // 获取绘图上下文
      var ctx = canvas.getContext('2d');
      var img = new Image();
      // 设置图片跨域
      img.crossOrigin = 'anonymous';
      img.src = 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF';
      img.onload = function() {
        ctx.drawImage(img, 0, 0);
      };
      
      // 原底色
      var original = function() {
        ctx.drawImage(img, 0, 0);
      };
      
      // 反相底色
      var invert = function() {
        ctx.drawImage(img, 0, 0);
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        for (var i = 0; i < data.length; i += 4) {
          data[i]     = 255 - data[i];     // red
          data[i + 1] = 255 - data[i + 1]; // green
          data[i + 2] = 255 - data[i + 2]; // blue
        }
        ctx.putImageData(imageData, 0, 0);
      };

	// 黑白反向
      var grayscale = function() {
        ctx.drawImage(img, 0, 0);
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        for (var i = 0; i < data.length; i += 4) {
          var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
          data[i]     = avg; // red
          data[i + 1] = avg; // green
          data[i + 2] = avg; // blue
        }
        ctx.putImageData(imageData, 0, 0);
      };
    }

上面代码用到了像素数据

getImageData()

该方法会返回一个 ImageData对象

它是画布区域的数据，画布的四个角分别表示为 (left, top)、(left + width, top)、(left, top + height)和(left + width, top + height) 四个点，这四个坐标点被设定为画布坐标空间元素。

ctx.getImageData(left, top, width, height)

canvas拾色器

document.addEventListener('click', (e) => {
            const x = e.layerX
            const y = e.layerY
            const {data} = ctx.getImageData(x, y, 1, 1)
            const color = `rgba(${data[0]},${data[1]}, ${data[2]}, ${data[3] / 255})`
            console.log(color);
        })