时间戳

首页 > 解决方案 > Canvas.toDataURL() 可能无法导出受污染的画布

javascript - Canvas.toDataURL() 可能无法导出受污染的画布

问题描述

我正在尝试使用 javascript、html、css 创建一个页面，我可以从在线链接调整图像大小。但是，在调整大小时，我遇到了使用Canvas.toDataURL(). 我已经在谷歌和这里搜索了这个问题。有人建议将照片的交叉来源修改为匿名或“*”。我尝试了这两种方法，但它对我不起作用。我想知道任何人都可以提供帮助。我的代码在下面的链接中。

https://jsfiddle.net/pangkachun/7axkq9pe/1/

var min_img_width = 60;
var min_img_height = 60;
var max_img_width = 1000;
var max_img_height = 1000;

var resizeableImage = function(image_target) {
  // Some variable and settings
  var $container,
      orig_src = new Image(),
      image_target = $(image_target).get(0),
      event_state = {},
      constrain = false,
      min_width = min_img_width, // Change as required
      min_height = min_img_height,
      max_width = max_img_width, // Change as required
      max_height = max_img_height,
      resize_canvas = document.createElement('canvas'),

  // ----------------- function to int the page ----------------------//
  init = function(){

    // When resizing, we will always use this copy of the original as the base
    orig_src.src = image_target.src;
    orig_src.crossorigin = 'anonymous';

    // Wrap the image with the container and add resize handles
    $(image_target).wrap('<div class="resize-container"></div>')
    .before('<span class="resize-handle resize-handle-nw"></span>')
    .before('<span class="resize-handle resize-handle-ne"></span>')
    .after('<span class="resize-handle resize-handle-se"></span>')
    .after('<span class="resize-handle resize-handle-sw"></span>');

    // Assign the container to a variable
    $container =  $(image_target).parent('.resize-container');

    // Add events (one for resize (resize handle) and one for moving - img)
    // addEventListenor -> mouse touchdown, resize handle, resize_img
    $container.on('mousedown touchstart', '.resize-handle', startResize);
  };
  // ------------------ end function to int the page -------------------------//


  // to save the data upon a event is fired
  saveEventState = function(e){
    // Save the initial event details and container state
    event_state.container_width = $container.width();
    event_state.container_height = $container.height();
    event_state.container_left = $container.offset().left;
    event_state.container_top = $container.offset().top;
    event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
    event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();

    // This is a fix for mobile safari
    // For some reason it does not allow a direct copy of the touches property
    if(typeof e.originalEvent.touches !== 'undefined'){
        event_state.touches = [];
        $.each(e.originalEvent.touches, function(i, ob){
          event_state.touches[i] = {};
          event_state.touches[i].clientX = 0+ob.clientX;
          event_state.touches[i].clientY = 0+ob.clientY;
        });
    }
    event_state.evnt = e;
  };

  // function to redraw the image based on width and height
  redrawImage = function(width, height){
    resize_canvas.width = width;
    resize_canvas.height = height;
    resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
    $(image_target).attr('src', resize_canvas.toDataURL("image/png"));
  };

  //------------------------ resizing function starts ----------------------------//
  startResize = function(e){
    e.preventDefault();
    e.stopPropagation();
    saveEventState(e);
    $(document).on('mousemove touchmove', resizing);
    $(document).on('mouseup touchend', endResize);
  };

  endResize = function(e){
    e.preventDefault();
    $(document).off('mouseup touchend', endResize);
    $(document).off('mousemove touchmove', resizing);
  };

  resizing = function(e){
    var mouse = {}, width, height, left, top, offset=$container.offset();
    mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
    mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();

    // Position image differently depending on the corner dragged and constraints
    if( $(event_state.evnt.target).hasClass('resize-handle-se') ){
      width = mouse.x - event_state.container_left;
      height = mouse.y  - event_state.container_top;
      left = event_state.container_left;
      top = event_state.container_top;
    } else if($(event_state.evnt.target).hasClass('resize-handle-sw') ){
      width = event_state.container_width - (mouse.x - event_state.container_left);
      height = mouse.y  - event_state.container_top;
      left = mouse.x;
      top = event_state.container_top;
    } else if($(event_state.evnt.target).hasClass('resize-handle-nw') ){
      width = event_state.container_width - (mouse.x - event_state.container_left);
      height = event_state.container_height - (mouse.y - event_state.container_top);
      left = mouse.x;
      top = mouse.y;
      if(constrain || e.shiftKey){
        top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
      }
    } else if($(event_state.evnt.target).hasClass('resize-handle-ne') ){
      width = mouse.x - event_state.container_left;
      height = event_state.container_height - (mouse.y - event_state.container_top);
      left = event_state.container_left;
      top = mouse.y;
    }

    if(width > min_width && height > min_height && width < max_width && height < max_height){
      // To improve performance you might limit how often resizeImage() is called
      redrawImage(width, height);
      // Without this Firefox will not re-calculate the the image dimensions until drag end
      $container.offset({'left': left, 'top': top});
      }
    }
    //------------------------ resizing functino end ----------------------------//

  init();
};

resizeableImage($('.resize-image'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <title>Image Resizing with Canvas</title>
        <link rel="stylesheet" type="text/css" href="css/component.css" />
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <div class="content">
                <header class="codrops-header">
                    <h1>Image Resizing &amp; Cropping <br /><span>with Canvas</span></h1>
                </header>
                <div class="component">
                    <div class="overlay">
                        <div class="overlay-inner">
                        </div>
                    </div>
                    <img class="resize-image" id='test-img'crossorigin="anonymous" src="https://static-cdn.pixlr.com/images/image-design.png" alt="image for resizing">
                </div>

            </div><!-- /content -->
        </div> <!-- /container -->
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/component.js"></script>
    </body>
</html>

非常感谢。

标签： javascriptjqueryhtmlcsshtml5-canvas

解决方案

有几种方法可以解决这个问题，但所有这些方法都需要至少暂时将图像托管在您的服务器上。最简单的选择是编写一个简单的 cgi 脚本，该脚本将 url 作为参数，从该 url 获取图像，并将其发送到浏览器，就像它在您的服务器上一样。如果您希望用户能够选择本地图像，您也可以使用文件上传表单。

请注意，如果您这样做，您将需要了解获取用户选择的文件并将它们提供给您自己的服务器上的安全隐患。您至少要确保文件是有效的图像，而不是 JavaScript 文件（这可能会导致代码注入攻击）。

不允许导出受污染的画布数据的原因是这是一个用户安全问题。远程站点可以将不同的图像发送给不同的用户，如果您的站点仅通过在画布上绘制就可以访问该图像，则该方法可用于窃取用户的私人数据。例如，亚马逊过去常常让网站所有者在他们的网站中嵌入一张图片，该图片最终将成为定制广告，包括问候语和最终用户的姓名。如果您可以在画布上绘制并导出数据，您可以将该数据发送回您的网络服务器并对其进行 OCR 以了解最终用户的姓名。

推荐阅读