Question

我的服务器中有一个图像路径。 javascript使用此路径加载图像以在画布中使用它，方式如下： JS脚本在画布中绘制图像：然后它隐藏了图像的某些部分（通过用黑色图层覆盖它们）

问题是用户可以读取我的js脚本来获取图片网址并完全加载（没有隐藏部分）

有没有办法解决这个问题，你可以想一想？

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

Answer 1

我有一个你可以使用的javascript图像加扰器。加扰功能适用于图像元素。进入onload循环时要小心。你可以看到我加载onload然后重置onload以避免在设置新值时循环。

function scramble(el){
    var V=document.createElement('canvas')
    var W=V.width=el.width,H=V.height=el.height,C=V.getContext('2d')
    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){
        var 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
    }
    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() {

  var srcImage = document.getElementById('srcImage');
  srcImage.onload = null;
  scramble(srcImage);
  
}

function previewFile() {
  var srcImage = document.getElementById('srcImage');
  var file = document.querySelector('input[type=file]').files[0];
  var 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>

Answer 2

这是不可能的。客户端将图像加载到他们的计算机上以供画布处理，因此客户端可以拦截图像加载（或者在这种特定情况下，查看其开发人员工具的“资源”选项卡中的图像）并将位复制到他们想要的任何位置

如果您有敏感信息，则需要在您控制的计算机上对其进行任何处理。鉴于您正在设计网站，您可能可以访问Web服务器。在那里进行处理。

防止客户端看到javascript画布中使用的图像

2 个答案: