如何使用画布修改来自另一个域的图像?-前端问题

How to use canvas to modify images from another domain?(如何使用画布修改来自另一个域的图像?)

本文介绍了如何使用画布修改来自另一个域的图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我使用 image.src = "L2xvY2FsL2RpcmVjdG9yeS9pbWFnZS5wbmc=" 时使用的代码，但如果我使用 image.src="aHR0cDovL3JlbW90ZS9wYXRo" 它会加载图像，但其余的 mousemove 功能不起作用.你是怎么解决的?

This is the code i am using when i have image.src = "L2xvY2FsL2RpcmVjdG9yeS9pbWFnZS5wbmc=" works but if i use image.src="aHR0cDovL3JlbW90ZS9wYXRo" it loads the image but rest mousemove function do not work. How do you fix it?

复制粘贴到 test.htm

<script type="text/javascript" src="aHR0cDovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjYuNC9qcXVlcnkubWluLmpz"></script>
<script>
$(document).ready(function()
{
  var image = new Image();
  var ctx = $('#canvas')[0].getContext("2d");
  image.src = "aHR0cDovL3d3dy5nb29nbGUuY29tL2ludGwvZW5fY29tL2ltYWdlcy9zcnByL2xvZ28zdy5wbmc=";
  //image.src = "L2FnZW50cy9nb29nbGUucG5n";

  image.width="340";
  image.height="220";
  image.onload = function () 
  {
    ctx.drawImage(image, 0, 0, image.width, image.height);
  }
  $('#canvas').mousemove(function(e) 
  { 
    var canvasOffset = $(this).offset();
    var canvasX = Math.floor(e.pageX - canvasOffset.left);
    var canvasY = Math.floor(e.pageY - canvasOffset.top);
    var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
    var pixel = imageData.data;

    var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
    $(document.body).css('background-color',pixelColor);

  });

});
</script>

<body>
  <canvas id="canvas" width="340" height="220"></canvas>
<body>

跟进(复制粘贴):

<script type="text/javascript" src="aHR0cDovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjYuNC9qcXVlcnkubWluLmpz"></script>
<script type="text/javascript" src="aHR0cHM6Ly9yYXcuZ2l0aHViLmNvbS9iZXRhbWF4L2dldEltYWdlRGF0YS9tYXN0ZXIvanF1ZXJ5LmdldGltYWdlZGF0YS5taW4uanM="></script>
<script>
$(document).ready(function()
{
  //  var image = new Image();
  //  var ctx = $('#canvas')[0].getContext("2d");
  //  //image.src = "aHR0cDovL3d3dy5nb29nbGUuY29tL2ludGwvZW5fY29tL2ltYWdlcy9zcnByL2xvZ28zdy5wbmc=";
  //  image.src = "L2FnZW50cy9nb29nbGUucG5n";
  //  
  //  image.width="340";
  //  image.height="220";
  //  image.onload = function () 
  //  {
  //    ctx.drawImage(image, 0, 0, image.width, image.height);
  //  }
  //  $('#canvas').mousemove(function(e) 
  //  { 
  //    var canvasOffset = $(this).offset();
  //    var canvasX = Math.floor(e.pageX - canvasOffset.left);
  //    var canvasY = Math.floor(e.pageY - canvasOffset.top);
  //    var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
  //    var pixel = imageData.data;
  //
  //    var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
  //    $(document.body).css('background-color',pixelColor);
  //
  //  });
  $.getImageData({
    url: "http://www.google.com/intl/en_com/images/srpr/logo3w.png",
    success: function(image){
   
      // Set up the canvas
      var can = document.getElementsByTagName('canvas')[0];
      var ctx = can.getContext('2d');
   
      // Set the canvas width and heigh to the same as the image
      $(can).attr('width', image.width);
      $(can).attr('height', image.height);
   
      // Draw the image on to the canvas
      ctx.drawImage(image, 0, 0, image.width, image.height);
   
      // Get the image data
      var image_data = ctx.getImageData(0, 0,  image.width, image.height);
      var image_data_array = image_data.data;
   
      // Invert every pixel
      //for (var i = 0, j = image_data_array.length; i < j; i+=4) {
      //image_data_array[i] = 255 - image_data_array[i];
      //image_data_array[i+1] = 255 - image_data_array[i+1];
      //image_data_array[i+2] = 255 - image_data_array[i+2];
      /