javascript - 防止客户端看到 JavaScript Canvas 中使用的图像

Question

我的服务器中有一个图像的路径。 JavaScript 使用此路径来加载图像以在 Canvas 中使用它，方法如下: JS 脚本在 Canvas 中绘制图像: 然后它隐藏图像的某些部分(通过用黑色层覆盖它们)

问题是用户可以读取我的js脚本来获取图像url，并完全加载它(没有隐藏部分)

您能想到有办法解决这个问题吗？

    imageMap.src = 'pathToJPGImage.jpg';
    imageMap.onload = function() {
      // this function draws black circles hiding areas of the map
      CoverHidenAreas();
    }

Answer 1

我有一个 javascript 图像扰频器你可以使用。打乱功能适用于图像元素。小心进入加载循环。你可以看到我对onload进行了打乱，然后重置了onload，以避免在设置新值时出现循环。

   function scramble(el) {
  // create a canvas element
  const V = document.createElement('canvas')

  // set the width and height of the canvas to be the same as the input image , then get the 2d context
  const W = V.width = el.width, H = V.height = el.height, C = V.getContext('2d')

  // draw the input image onto the canvas
  C.drawImage(el, 0, 0)

  var id = C.getImageData(0, 0, W, H), D = id.data, L = D.length, i = L / 4, A = []

  for (; --i;)A[i] = i
  function S(A) {
    let L = A.length, x = L >> 3, y, t, i = 0, s = []

    if (L < 8) return A

    for (; i < L; i += x)s[i / x] = S(A.slice(i, i + x))
    for (i = 4; --i;)y = [6, 4, 7, 5, 1, 3, 0, 2][i], t = s[i], s[i] = s[y], s[y] = t
    s = [].concat.apply([], s)
    return s
  }

  // get the pixel data of the image
  var N = C.createImageData(W, H), d = N.data, A = S(A)

  for (var i = 0; i < L; i++)d[i] = D[(A[i >> 2] * 4) + (i % 4)]
  C.putImageData(N, 0, 0)
  el.src = C.canvas.toDataURL()
}

function btnScrambleClick() {
  const srcImage = document.getElementById('srcImage');
  srcImage.onload = null;
  scramble(srcImage);

}

function previewFile() {
  const srcImage = document.getElementById('srcImage');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.onloadend = function () {
    srcImage.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    srcImage.src = "";
  }
}

previewFile();

<input type="file" onchange="previewFile()"/>

<p>
<button id="btnScramble" onclick="btnScrambleClick()">Scramble / Unscramble</button>
</p>

<div id="main">
  <img id="srcImage" src="" alt="Uploaded image" onload="btnScrambleClick()">
</div>