Question

我正在开发一个Web应用程序，它涉及将图像加载到画布对象中，然后将这些图像操作到识别之外。我需要隐藏原始源图像文件（jpeg），以便客户端的用户不能使用开发工具来查看原始图像。

我尝试将图像编码为base64并通过JSON数据文件加载它，但即使使用此方法，检查器工具仍会显示原始图像文件（当它设置为我的javascript图像对象的src时）。有什么方法可以加密和解密图像文件，以便用户无法看到原始图像（或者让它成为一些乱码图像）？我希望在客户端这样做，因为我的所有代码目前都是客户端。提前致谢！

这是我通过JSON文件加载base64编码图像数据的代码：

//LOAD JSON INSTEAD?
        $.getJSON( "media/masks.json", function( data ) {
          console.log("media/masks.json LOADED");
          //loop through data
          var cnt = 0;
          for (var key in data)
            {
               if (data.hasOwnProperty(key))
               {
                  // here you have access to
                  //var id = key;
                  var imgData = data[key];

                  //create image object from data
                  var image = new Image();
                  image.src = imgData;

                  console.log('img src: '+ imgData);

                  var elementId = $scope.masks[cnt].id;

                  // copy the images to canvases
                  imagecanvas = document.createElement('CANVAS');
                  imagecanvas.width = image.width;
                  imagecanvas.height = image.height;
                  imagecanvas.getContext('2d').drawImage(image,0,0);
                  imageCanvases[elementId] = imagecanvas;
               }
               cnt++;
            }

        });

这就是我在Chrome开发工具网络检查器中看到的内容（正是我想要避免的）：

Answer 1

我需要隐藏原始源图像文件（jpeg），以便客户端的用户不能使用开发工具查看原始图像。

那是不可能的。始终有一种方法可以使用开发人员工具获取图像。即使没有，一个简单的屏幕截图也会击败你所采取的任何措施。

如何在线加密和解密图像文件？

1 个答案: